<template>
  <div class="main shop-main">
    <navbar @submitEls="submit" :pageId="customPage.pageId" :appType="appType" :navType="navType"
      @saveSearchPageHotWord="saveSearchPageHotWord"></navbar>
    <ul class="side-left">
      <li v-for="(item, index) in navList" :key="index" class="pointer"
        :class="item.navType === navType ? 'active' : ''" @click="navEls(item, index)">
        {{ item.name }}
      </li>
    </ul>
    <!-- 店铺装修开始 -->
    <template v-if="navType === 10">
      <side-left @addForm="addForm" :customPage="customPage"></side-left>
      <div class="shop-content">
        <div class="height-100"></div>
        <div class="diy-bg-main" :class="pageType === 10 ? 'home' : ''">
          <div class="diy-phone diy-bg-box">
            <div class="phone-body">
              <div class="phone-title" id="page"></div>
              <div class="phone-main main-box" :class="pageType === 10 ? 'home' : ''"></div>
            </div>
          </div>
          <ul class="action-btns">
            <li class="position-btn flex flex-center up-btn mar-t-5"
              :class="{'active': details.canUp && otherType === 0}" @click="upDetails">
              <span></span>
            </li>
            <li class="position-btn flex flex-center down-btn" :class="{'active': details.canDown && otherType === 0}"
              @click="downDetails">
              <span></span>
            </li>
            <li class="flex flex-center copy-btn" :class="{'active': otherType === 0 && type !== 0 && type !== 100}"
              @click="copyDetails">
              <span></span>
            </li>
            <li class="flex flex-center setting-btn" :class="{'active': otherType === 1}" @click="editForm(1)">
              <span></span>
            </li>
          </ul>
          <div class="clearfix diy-box">
            <div class="diy-phone none-border">
              <div class="ui-sortable">
                <div class="phone-top-title none-drag" @click="editForm(2)" :class="{
                    'selected':customPage.mpTitleShow,
                    'top-title-anchor':appType == 13,
                    'title-type-w':appType == 13 ? customPage.titleType == 11 : customPage.titleType == 10,
                    'text-align-l':pageType === 10 && customPage.titleCenter == 11
                  }" :style="{
                    backgroundColor: customPage.titleBackgroundColor,
                    color: (customPage.titleType == 10 && appType !== 13) || (customPage.titleType == 11 && appType == 13) ? '#000000' : '#ffffff'
                  }">
                  <div v-if="pageType === 11" class="back-icon font-20" :style="{
                      color: (customPage.titleType == 10 && appType !== 13) || (customPage.titleType == 11 && appType == 13) ? '#000000' : '#ffffff'
                    }">
                    <i class="el-icon-arrow-left"></i>
                  </div>
                  <div :class="{
                      'flex-center':customPage.titleCenter == 10,
                      'flex v-align-c':pageType === 10 && customPage.titleCenter == 11}">
                    <div class="mar-l-13 mar-r-13 flex v-align-c" v-if="customPage.searchFlag == 0">
                      <img v-if="pageType === 10 && customPage.iconUrl" class="height-30"
                        :class="customPage.mpPageTitle ? 'mar-r-10' : ''" :src="customPage.iconUrl" />
                      <div>{{ customPage.mpPageTitle ? customPage.mpPageTitle : '&nbsp;' }}</div>
                    </div>
                    <template v-if="customPage.searchFlag == 1">
                      <div class="flex-item flex-center">
                        <div class="flex pad-l-13">
                          <img v-if="pageType === 10 && customPage.iconUrl" class="height-30"
                            :src="customPage.iconUrl" />
                        </div>
                        <div class="flex-item"></div>
                      </div>
                      <div class="flex-item mar-l--8 mar-r--8 pad-t-3">
                        <div class="anchor-input flex v-align-c flex-center">
                          <div class="search-icon mar-r-8 mar-b--2"></div>
                          <div class="search-txt">{{ customPage.mpPageSearchTxt }}</div>
                        </div>
                      </div>
                      <div class="flex-item">&nbsp;</div>
                    </template>
                  </div>
                </div>
                <div class="pos-rel"
                  v-show="customPage.shopHomeFlag == 1 && pageType == 10 && appType == 10 && !groupBuyAddressBar">
                  <div class="phone-top-bar none-drag flex v-align-c font-12" @click="editForm(3)"
                    :class="{'selected':customPage.topbarShow}"
                    :style="'background-color:'+ customPage.homeBackgroundColor + ';color:' + customPage.homeFontColor + ';'">
                    <img class="mar-l-9 mar-r-7" :src="iconsUser" alt="">
                    <span v-text="customPage.shopNameFormat ? customPage.shopNameFormat : '店主昵称'"></span>
                    <icon v-if="customPage.homeStyle == 11" class="iconfont icon-arrow-right font-10 mar-t-2 mar-l-5">
                    </icon>
                    <div class="flex-item">&nbsp;</div>
                    <div v-if="customPage.homeStyle == 11"
                      class="flex v-align-c search-shop mar-r-10 pad-t-4 pad-b-4 pad-l-10 pad-r-10">
                      <i class="el-icon-search font-w mar-r-5" />
                      <span>搜索</span>
                    </div>
                    <div v-else class="flex v-align-c mar-r-10">
                      <span>TA的主页</span>
                      <icon class="iconfont icon-arrow-right font-10 mar-t-2 mar-l-5"></icon>
                    </div>
                    <div class="btn-edit-del" :class="{'selected':customPage.topbarShow}">
                      <el-popconfirm title="您确定删除吗？" @onConfirm="deleteHomeStyle">
                        <div class="btn-del" slot="reference">删除</div>
                      </el-popconfirm>
                    </div>
                  </div>
                  <el-tag class="tag-edit phone-top-edit cursor-p" @click="editForm(3)">店主主页</el-tag>
                </div>
                <div class="diy-scroll-box" :class="'scroll-pageType-' + pageType + ' scroll-appType-' + appType"
                  :style="'background-color:'+ customPage.backgroundColor + ';'">
                  <!-- 切换自提点 -->
                  <template v-if="groupBuyAddressBar">
                    <div class="drag-box">
                      <div class="drag" @click="formGroupAddressEls">
                        <div class="diy-content diy-p-content">
                          <div class="align-c" style="background: #ff1717">
                            <img :src="groupBarPic" class="width-358 height-40" border="0px">
                          </div>
                        </div>
                      </div>
                      <el-tag class="tag-edit cursor-p" @click="formGroupAddressEls">切换自提点</el-tag>
                    </div>
                  </template>
                  <!-- 标签导航 -->
                  <template v-for="(item, index) in listDetails">
                    <div v-if="item.componentType === 41" class="drag-box" :id="'content-'+item.sortNo"
                      :key="'content-'+index">
                      <div class="drag" :class="item.show ? 'selected':''" @click="formEls(item)">
                        <div class="topnav-diy" :style="{backgroundColor: item.propMap.backgroundColor}">
                          <div v-for="(topnav, index) in item.topNavList" :key="'topnav-list-' + index"
                            class="topnav-diy-item"
                            :style="{backgroundColor: index === 0 ? item.propMap.selectBackgroundColor : '', color: index === 0 ? item.propMap.selectFontColor : item.propMap.fontColor}"
                            :class="{'topnav-diy-overflow': item.topNavList.length > 5}">
                            {{topnav.navName}}
                            <div v-if="index === 0" class="topnav-active"
                              :style="{backgroundColor: item.propMap.selectFontColor}"></div>
                          </div>
                        </div>
                      </div>
                      <div class="btn-edit-del" :class="item.show ? 'selected':''">
                        <el-popconfirm title="您确定删除吗？" @onConfirm="remove(item)">
                          <div class="btn-del" slot="reference">删除</div>
                        </el-popconfirm>
                      </div>
                      <el-tag class="tag-edit cursor-p" @click="formEls(item)">标签导航</el-tag>
                    </div>
                  </template>
                  <draggable class="content-box" v-model="listDetails" dragable="true" :move="getdata"
                    @update="datadragEnd" :style="{backgroundImage: 'url('+ customPage.backgroundPicUrl +')'}">
                    <template v-for="(item, index) in listDetails">
                      <!-- 图片轮播预览 -->
                      <template v-if="item.componentType === 19">
                        <div @click="formEls(item)" :class="item.show ? 'selected':''"
                          class="home-carousel-box drag-box none-drag" :key="'swiper-' + index">
                          <swiper-picture :dataList="item" :swiperProps="item.propMap"
                            :style="{background: item.swiperList.length === 0 ? '#eee' : 'unset'}" class="drag">
                          </swiper-picture>
                          <div class="btn-edit-del" :class="item.show ? 'selected':''">
                            <el-popconfirm title="您确定删除吗？" @onConfirm="remove(item)">
                              <div class="btn-del" slot="reference">删除</div>
                            </el-popconfirm>
                          </div>
                          <el-tag class="tag-edit cursor-p" @click="formEls(item)">轮播组</el-tag>
                        </div>
                      </template>
                      <!-- 商品预览 -->
                      <template v-else-if="item.componentType === 20">
                        <div class="drag-box goods-list" :id="'goods-'+item.sortNo" :key="'goods-'+index">
                          <template v-if="appType !== 13">
                            <div class="drag" :class="item.show ? 'selected':''" @click="formEls(item)" :style="{
                                backgroundColor: item.propMap.backgroundColor,
                                padding: item.propMap.verticalMargin + 'px ' + item.propMap.horizontalMargin + 'px'
                              }">
                              <ul v-if="item.goodsList && item.goodsList.length > 0"
                                :class="'show-type-' + item.propMap.goodsStyle">
                                <li v-for="(itemGoods, index) in item.goodsList" :key="index"
                                  :class="'goods-style-' + item.propMap.goodsDetailStyle"
                                  :style="{backgroundColor: item.propMap.goodsBackgroundColor, borderRadius: item.propMap.radius + 'px'}">
                                  <template v-if="itemGoods.imgUrl||itemGoods.title">
                                    <div class="pic-box even">
                                      <div class="gooods-pic pos-rel del-show">
                                        <img v-show="item.propMap.goodsStyle === '10'"
                                          :src="itemGoods.picUrl ? itemGoods.picUrl : (itemGoods.imgUrl||goodsDefault)" />
                                        <img v-show="item.propMap.goodsStyle !== '10'"
                                          :src="itemGoods.imgUrl||goodsDefault" />
                                        <template v-if="itemGoods.stock === 0">
                                          <div class="del-layer stock-none">
                                            <label>已售罄</label>
                                          </div>
                                          <div class="del-layer-bg"></div>
                                        </template>
                                      </div>
                                    </div>
                                    <div class="detail-box">
                                      <div class="desc font-15 mar-b-16" :style="{color: item.propMap.goodsTitleColor}">
                                        {{ itemGoods.title }}
                                      </div>
                                      <div class="flex v-align-b info-bar font-12 true">
                                        <div class="flex-item">
                                          <div v-if="appType == 10" class="height-s-item">
                                            <!-- 分享赚，只有查看自己店铺并且分销佣金大于0可见 -->
                                            <div class="tag flex v-align-c"
                                              v-if="itemGoods.distributeIncome && itemGoods.distributeIncome > 0">
                                              <label class="label-f">分销</label>
                                              <label class="label-s">赚<span
                                                  class="income-label">{{ itemGoods.distributeIncome ? itemGoods.distributeIncome : '0.00' }}</span>元</label>
                                            </div>
                                          </div>
                                          <div class="price flex v-align-c">
                                            <div class="flex-item">
                                              <label class="font-19 mar-l--3 label-f font-w">
                                                <span class="tag-xs-t font-12"
                                                  :style="{color: item.propMap.goodsTitleColor}">限时/</span>
                                                <span :style="{color: item.propMap.goodsPriceColor}"><span
                                                    class="mar-r--3">￥</span>{{ itemGoods.price }}</span>
                                              </label>
                                            </div>
                                            <div v-if="item.propMap.buyShow && item.propMap.goodsStyle !== '13'"
                                              class="buy-sty" :class="'buy-sty-' + item.propMap.buyStyle"></div>
                                          </div>
                                        </div>
                                        <button v-if="!item.propMap.buyShow && item.propMap.goodsStyle !== '10'"
                                          class="buy-now-type font-12 mar-l-10 mar-b-1" size="mini"
                                          type="primary">立即购买</button>
                                      </div>
                                      <!-- <button class="buy-now-type font-12 last-item" size="mini" type="primary">立即购买</button> -->
                                    </div>
                                    <div class="pic-box odd">
                                      <div class="gooods-pic pos-rel del-show">
                                        <img v-show="item.propMap.goodsStyle === '10'"
                                          :src="itemGoods.picUrl ? itemGoods.picUrl : (itemGoods.imgUrl||goodsDefault)" />
                                        <img v-show="item.propMap.goodsStyle !== '10'"
                                          :src="itemGoods.imgUrl||goodsDefault" />
                                        <template v-if="itemGoods.stock === 0">
                                          <div class="del-layer stock-none">
                                            <label>已售罄</label>
                                          </div>
                                          <div class="del-layer-bg"></div>
                                        </template>
                                      </div>
                                    </div>
                                  </template>
                                </li>
                                <div v-if="item.goodsList && item.goodsList.length > 0" class="show-more">
                                  查看更多<i class="el-icon-arrow-right" v-if="item.propMap.goodsStyle !== '14'"></i>
                                  <i class="el-icon-arrow-down" v-else></i>
                                </div>
                              </ul>
                              <div v-else>
                                <img v-show="item.propMap.goodsStyle === '11'" :src="groupPic21"
                                  class="width-345 height-258" border="0px">
                                <img v-show="item.propMap.goodsStyle === '10'" :src="groupPic22"
                                  class="width-349 height-504" border="0px">
                                <img v-show="item.propMap.goodsStyle === '12'" :src="groupPic23"
                                  class="width-332 height-216" border="0px">
                                <img v-show="item.propMap.goodsStyle === '13'" :src="groupPic24"
                                  class="width-354 height-216" border="0px">
                                <img v-show="item.propMap.goodsStyle === '14'" :src="groupPic25"
                                  class="width-350 height-258" border="0px">
                              </div>
                            </div>
                          </template>
                          <template v-else>
                            <!-- {{ item.goodsList }} -->
                            <!-- {{ item.propMap }} -->
                            <!-- 单列横排 -->
                            <div v-if="item.propMap.goodsStyle == 12" class="drag pad-10"
                              :class="item.show ? 'selected':''" @click="formEls(item)"
                              :style="{backgroundColor: item.propMap.backgroundColor}">
                              <ul v-if="item.goodsList && item.goodsList.length > 0" class="show-anchor"
                                :class="'show-type-' + item.propMap.goodsStyle">
                                <li v-for="(itemGoods, index) in item.goodsList" :key="index"
                                  :class="'goods-style-' + item.propMap.goodsDetailStyle" class="flex v-align-s"
                                  :style="{backgroundColor: item.propMap.goodsBackgroundColor, borderRadius: item.propMap.radius + 'px'}">
                                  <template v-if="itemGoods.imgUrl||itemGoods.title">
                                    <img :src='itemGoods.imgUrl' class="img-item mar-r-10" />
                                    <div class="flex-item pad-t-9">
                                      <div class="flex v-align-c">
                                        <div v-show="itemGoods.anchorGoodsStatus == 2"
                                          class="font-12 free-tag-span font-red mar-b-3"
                                          :style="{backgroundColor: item.propMap.tagsBackgroundColor, color: item.propMap.tagsColor}">
                                          免费寄样</div>
                                        <div class="goods-title flex-item font-15 font-w mar-b-3"
                                          :style="{color: item.propMap.goodsTitleColor}">{{ itemGoods.title }}</div>
                                      </div>
                                      <div class="font-12 font-color-9" :style="{color: item.propMap.fontTitleColor}">
                                        <span>已售<span class="font-red"
                                            :style="{color: item.propMap.salesNumColor}">{{itemGoods.salesNum}}</span>件</span>
                                        <span>|</span>
                                        <span>{{itemGoods.putawayNum}}位网红在卖</span>
                                      </div>
                                      <div class="font-12 font-color-9 mar-t-5 mar-b-9 flex v-align-c"
                                        :style="{color: item.propMap.fontTitleColor}">
                                        <span>支持</span>
                                        <div class="plant-icon flex v-align-c">
                                          <span v-show="itemGoods.anchorPlatformShopType == 1"
                                            class="icon icon-1"></span>
                                          <span v-show="itemGoods.tiktokAuthority == 1" class="icon icon-2"></span>
                                          <span v-show="itemGoods.quickAuthority == 1" class="icon icon-3"></span>
                                        </div>
                                      </div>
                                      <div class="flex v-align-c font-12 mar-r--10">
                                        <div class="flex-item font-red font-color-9 mar-r--10"
                                          :style="{color: item.propMap.incomeColor}">
                                          <p class="pad-b-5">¥<span class="font-13 font-w">{{ itemGoods.income }}</span>
                                          </p>
                                          <p>预计赚</p>
                                        </div>
                                        <div class="flex-item font-color-9">
                                          <p class="pad-b-5 font-13 font-w">
                                            {{itemGoods.anchorRatio ? itemGoods.anchorRatio : 0}}%
                                          </p>
                                          <p>佣金比例</p>
                                        </div>
                                        <div class="flex-item font-color-9"
                                          :style="{color: item.propMap.goodsPriceColor}">
                                          <p class="pad-b-5 font-13 font-w">¥<span
                                              class="font-13 font-w">{{ itemGoods.price }}</span></p>
                                          <p>观众购买价</p>
                                        </div>
                                      </div>
                                    </div>
                                  </template>
                                </li>
                              </ul>
                              <div v-else>
                                <img v-show="item.propMap.goodsStyle === '11'" :src="groupPic21"
                                  class="width-345 height-258" border="0px">
                                <img v-show="item.propMap.goodsStyle === '10'" :src="groupPic22"
                                  class="width-349 height-504" border="0px">
                                <img v-show="item.propMap.goodsStyle === '12'" :src="groupPic23"
                                  class="width-332 height-216" border="0px">
                                <img v-show="item.propMap.goodsStyle === '13'" :src="groupPic24"
                                  class="width-354 height-216" border="0px">
                                <img v-show="item.propMap.goodsStyle === '14'" :src="groupPic25"
                                  class="width-350 height-258" border="0px">
                              </div>
                            </div>
                            <!-- 横向滚动 -->
                            <div v-if="item.propMap.goodsStyle == 14" class="drag pad-10 anchor-swiper"
                              :class="item.show ? 'selected':''" @click="formEls(item)">
                              <div class="anchor-swiper-bg"
                                :style="{backgroundImage: 'url('+ item.propMap.backgroundImg +')'}">
                                <div class="height-15 mar-b-7"></div>
                                <swiper :options="swiperOption" class="swiper-wrap height-212" ref="mySwiper"
                                  v-if="item.goodsList && item.goodsList.length !== 0">
                                  <swiper-slide v-for="(itemGoods, index) in item.goodsList" :key="index">
                                    <div class="img-anchor">
                                      <img :src='itemGoods.imgUrl' />
                                      <div class="join-goods">已加入商品库</div>
                                    </div>
                                    <div class="anchor-content"
                                      :style="{backgroundColor: item.propMap.goodsBackgroundColor}">
                                      <div class="flex v-align-c">
                                        <div v-show="itemGoods.anchorGoodsStatus == 2"
                                          class="font-12 free-tag-span font-red mar-b-3"
                                          :style="{backgroundColor: item.propMap.tagsBackgroundColor, color: item.propMap.tagsColor}">
                                          免费寄样</div>
                                        <div class="goods-title flex-item font-12 font-w mar-b-3"
                                          :style="{color: item.propMap.goodsTitleColor}">{{ itemGoods.title }}</div>
                                      </div>
                                      <div class="font-12">
                                        <div class="flex v-align-c font-red font-color-9"
                                          :style="{color: item.propMap.incomeColor}">
                                          <div class="pad-b-5">
                                            <span>预计赚</span>
                                            ¥<span class="font-w">{{ itemGoods.income }}</span>
                                          </div>
                                        </div>
                                        <div class="pad-b-5 flex v-align-c font-color-9"
                                          :style="{color: item.propMap.goodsPriceColor}">
                                          <div class="mar-r-2">观众购买价</div>
                                          <div>¥</div>
                                          <div class="font-w price-limit mar-r--15">{{ itemGoods.price }}</div>
                                        </div>
                                      </div>
                                      <div class="font-12 font-color-9 mar-t--2 flex v-align-c">
                                        <span :style="{color: item.propMap.fontTitleColor}">支持</span>
                                        <div class="plant-icon flex v-align-c">
                                          <span v-show="itemGoods.anchorPlatformShopType == 1"
                                            class="icon icon-1"></span>
                                          <span v-show="itemGoods.tiktokAuthority == 1" class="icon icon-2"></span>
                                          <span v-show="itemGoods.quickAuthority == 1" class="icon icon-3"></span>
                                        </div>
                                      </div>
                                    </div>
                                  </swiper-slide>
                                  <div class="swiper-pagination" v-for="(itemGoods, index) in item.goodsList"
                                    :key="index" slot="pagination"></div>
                                </swiper>
                              </div>
                            </div>
                          </template>
                          <div class="btn-edit-del" :class="item.show ? 'selected':''">
                            <el-popconfirm title="您确定删除吗？" @onConfirm="remove(item)">
                              <div class="btn-del" slot="reference">删除</div>
                            </el-popconfirm>
                          </div>
                          <el-tag class="tag-edit cursor-p" @click="formEls(item)">商品组</el-tag>
                        </div>
                      </template>
                      <!-- 图片预览 -->
                      <template v-else-if="item.componentType === 12">
                        <div class="drag-box" :id="'picture-'+item.sortNo" :key="'picture-'+index">
                          <div class="drag" :class="item.show ? 'selected':''" @click="formEls(item)">
                            <div class="diy-content diy-p-content" :class="'diy-pic-' + item.propMap.picStyle"
                              :id="'picture-box-' + index"
                              :style="'padding: '+ item.propMap.verticalMargin+'px '+ item.propMap.horizontalMargin+'px;'">
                              <div v-for="(itemPicture, indexPicture) in item.pictureList"
                                :key="'list-p-' + indexPicture" class="item-pic-bar"
                                v-if="indexPicture == 0 || (item.propMap.picStyle == 11 && indexPicture > 0)">
                                <div v-if="itemPicture.imgUrl">
                                  <img v-if="item.propMap.picStyle == 11" :src="itemPicture.imgUrl" :style="'width: 100%; height: ' + item.propMap.height
                                  + 'px;padding: '+ '0;border-radius:'
                                  + item.propMap.radius + 'px;'">
                                  <img v-else :src="itemPicture.imgUrl" :style="'width: 100%; padding: '+ '0;border-radius:'
                                  + item.propMap.radius + 'px;'">
                                </div>
                                <div v-else class="picture-p-default"
                                  :style="'border-radius:' + item.propMap.radius + 'px;'">
                                  <template v-if="item.pictureList.length === 1">
                                    <img :src="pictureDefault" border="0px">
                                  </template>
                                  <template v-else>
                                    <img v-if="indexPicture === 0" :src="pictureDefault" border="0px">
                                    <img v-if="indexPicture === 1" :src="goodsDefault" border="0px">
                                  </template>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="btn-edit-del" :class="item.show ? 'selected':''">
                            <el-popconfirm title="您确定删除吗？" @onConfirm="remove(item)">
                              <div class="btn-del" slot="reference">删除</div>
                            </el-popconfirm>
                          </div>
                          <el-tag class="tag-edit cursor-p" @click="formEls(item)">图片</el-tag>
                        </div>
                      </template>
                      <!-- 辅助分割线预览 -->
                      <template v-else-if="item.componentType === 22">
                        <div class="drag-box" :id="'auxiliary-'+item.sortNo" :key="'auxiliary-'+index">
                          <div class="drag" :class="item.show ? 'selected':''" @click="formEls(item)">
                            <div class="diy-content diy-aux-content"
                              :style="'padding:'+item.propMap.verticalMargin+'px 0;'">
                              <div v-if="item.propMap.blankStyle === '11'" class="width-345"
                                :style="'height:'+item.propMap.lineHeight+'px;backgroundColor:'+item.propMap.lineColor">
                              </div>
                            </div>
                          </div>
                          <div class="btn-edit-del" :class="item.show ? 'selected':''">
                            <el-popconfirm title="您确定删除吗？" @onConfirm="remove(item)">
                              <div class="btn-del" slot="reference">删除</div>
                            </el-popconfirm>
                          </div>
                          <el-tag class="tag-edit cursor-p" @click="formEls(item)">辅助分割</el-tag>
                        </div>
                      </template>
                      <!-- 按钮组预览 -->
                      <template v-else-if="item.componentType === 11">
                        <!-- 图文按钮 -->
                        <div class="drag-box drag-btns-box" :id="'btns-'+item.sortNo" :key="'btns-'+index">
                          <div class="drag" :class="item.show ? 'selected':''" @click="formEls(item)"
                            v-if="item.propMap.templateStyle === '10'">
                            <div
                              :style="{padding: item.propMap.verticalMargin + 'px 0', margin: '0 ' +
                             item.propMap.horizontalMargin + 'px', background: item.propMap.backgroundColor, borderRadius: item.propMap.radius + 'px'}">
                              <el-carousel :height="item.propMap.pageNum * 1 === 1 ? '74px' : '162px'">
                                <el-carousel-item v-for="(page, pageIndex) in item.btnGroup" :key="pageIndex">
                                  <div class="diy-content diy-btns-content" v-for="(row, rowIndex) in page"
                                    :key="'row' + rowIndex">
                                    <ul class="flex v-align">
                                      <li v-for="(itemBtns, index) in row" :key="'list-b-' + index" class="flex-item"
                                        :style="{flex: '0 0 calc(100% / '+item.propMap.rowNum+')'}">
                                        <img :src="itemBtns.imgUrl ? itemBtns.imgUrl : defaultBtns"
                                          :class="'btns-radius-' + item.propMap.buttonStyle" class="width-50 height-50"
                                          border="0px">
                                        <div class="font-12 pad-t-3 mar-b--2" :style="'color:'+ item.propMap.fontColor">
                                          {{ itemBtns.buttonName ? itemBtns.buttonName : '按钮文字' }}
                                        </div>
                                      </li>
                                    </ul>
                                  </div>
                                </el-carousel-item>
                              </el-carousel>
                            </div>
                          </div>
                          <!-- 文字按钮 -->
                          <div class="drag" :class="item.show ? 'selected':''" @click="formEls(item)" v-else>
                            <div
                              :style="{padding: item.propMap.verticalMargin + 'px 0', margin: '0 ' +
                             item.propMap.horizontalMargin + 'px', background: item.propMap.backgroundColor, borderRadius: item.propMap.radius + 'px'}">
                              <el-carousel :height="item.propMap.pageNum * 1 === 1? '40px' : '71px'">
                                <el-carousel-item v-for="(page, pageIndex) in item.btnGroup" :key="pageIndex">
                                  <div class="diy-content diy-btns-content diy-txts-content"
                                    v-for="(row, rowIndex) in page" :key="'row' + rowIndex">
                                    <ul class="flex v-align">
                                      <li v-for="(itemBtns, index) in row" :key="'list-b-' + index" class="flex-item"
                                        :style="{flex: '0 0 calc(100% / '+item.propMap.rowNum+')'}">
                                        <div class="font-12 pad-t-12 mar-b-5" :style="'color:'+ item.propMap.fontColor">
                                          {{ itemBtns.buttonName ? itemBtns.buttonName : '按钮文字' }}
                                        </div>
                                      </li>
                                    </ul>
                                  </div>
                                </el-carousel-item>
                              </el-carousel>
                            </div>
                          </div>
                          <div class="btn-edit-del" :class="item.show ? 'selected':''">
                            <el-popconfirm title="您确定删除吗？" @onConfirm="remove(item)">
                              <div class="btn-del" slot="reference">删除</div>
                            </el-popconfirm>
                          </div>
                          <el-tag class="tag-edit cursor-p" @click="formEls(item)">按钮组</el-tag>
                        </div>
                      </template>
                      <!-- 标题栏预览 -->
                      <template v-else-if="item.componentType === 13">
                        <div class="drag-box" :id="'picture-'+item.sortNo" :key="'picture-'+index">
                          <div class="drag" :class="item.show ? 'selected':''" @click="formEls(item)">
                            <div class="diy-content diy-t-bar" :class="'text-align-' + item.propMap.textAlign" :style="'background-color:'+ item.propMap.backgroundColor + ';color: ' + item.propMap.fontColor +
                              ';font-size: ' + item.propMap.textSize +'px;padding: ' +
                              item.propMap.verticalMargin +'px '+ item.propMap.horizontalMargin +'px;'">
                              {{ item.propMap.title ? item.propMap.title : '标题栏' }}
                            </div>
                            <div class="abs-right font-12 v-align-c" v-if="item.propMap.titleStyle === '11'"
                              :style="'right:' + item.propMap.horizontalMargin + 'px;color:' + item.propMap.showMoreColor + ';'">
                              <div>查看更多</div>
                              <icon class="iconfont icon-arrow-right font-12"
                                :style="'color:' + item.propMap.showMoreColor + ';'"></icon>
                            </div>
                          </div>
                          <div class="btn-edit-del" :class="item.show ? 'selected':''">
                            <el-popconfirm title="您确定删除吗？" @onConfirm="remove(item)">
                              <div class="btn-del" slot="reference">删除</div>
                            </el-popconfirm>
                          </div>
                          <el-tag class="tag-edit cursor-p" @click="formEls(item)">标题栏</el-tag>
                        </div>
                      </template>
                      <!-- 视频预览 -->
                      <template v-else-if="item.componentType === 16">
                        <div class="drag-box" :id="'video-'+item.sortNo" :key="'video-'+index">
                          <div class="drag" :class="item.show ? 'selected':''" @click="formEls(item)">
                            <div class="diy-content">
                              <video controls="controls" height="200px" :class="'video-w-' + item.video.videoStyle"
                                v-if="item.video.videoUrl" :src="item.video.videoUrl">
                                <source type="video/mp4">
                                Your browser does not support the video tag.
                              </video>
                              <img v-else :src="videoDefault" border="0px">
                            </div>
                          </div>
                          <div class="btn-edit-del" :class="item.show ? 'selected':''">
                            <el-popconfirm title="您确定删除吗？" @onConfirm="remove(item)">
                              <div class="btn-del" slot="reference">删除</div>
                            </el-popconfirm>
                          </div>
                          <el-tag class="tag-edit cursor-p" @click="formEls(item)">视频</el-tag>
                        </div>
                      </template>
                      <!-- 音频预览 -->
                      <template v-else-if="item.componentType === 17">
                        <div class="drag-box" :id="'audio-'+item.sortNo" :key="'audio-'+index">
                          <div class="drag" :class="item.show ? 'selected':''" @click="formEls(item)">
                            <div class="diy-content audio-box">
                              <div class="audio-bar flex">
                                <audio :id="'audioFile-'+item.sortNo" v-show="false" :src="item.audio.audioUrl"></audio>
                                <img :src="audioDefault" width="65" height="65" border="0px">
                                <div class="flex-item">
                                  <h5>{{ item.audio.title ? item.audio.title : '未定义音频标题' }}</h5>
                                  <p>{{ item.audio.subtitle ? item.audio.subtitle : '副标题' }}</p>
                                </div>
                                <span class="pad-t-10 pad-r-10">{{ item.audio.autoDuration }}</span>
                              </div>
                            </div>
                          </div>
                          <div class="btn-edit-del" :class="item.show ? 'selected':''">
                            <el-popconfirm title="您确定删除吗？" @onConfirm="remove(item)">
                              <div class="btn-del" slot="reference">删除</div>
                            </el-popconfirm>
                          </div>
                          <el-tag class="tag-edit cursor-p" @click="formEls(item)">音频</el-tag>
                        </div>
                      </template>
                      <!-- 文本预览 -->
                      <template v-else-if="item.componentType === 14">
                        <div class="drag-box" :id="'text-'+item.sortNo" :key="'text-'+index">
                          <div class="drag" :class="item.show ? 'selected':''" @click="formEls(item)">
                            <div class="diy-content diy-t-content text-valign-l">
                              <div v-html="item.text.content" v-if="item.text.content"></div>
                              <div v-else class="text-valign-l font-16">
                                <p style="margin-top: 15px">点击编辑『富文本』内容——></p>
                                <p>你可以对文字进行<b>加粗</b>、<i>斜体</i>、<u>下划线</u>、</p>
                                <p><del>删除线</del>、文字<font color="#2f8fe2">颜色</font>、
                                  <span style="background: #ffc000">
                                    <font color="#ffffff">背景色</font>
                                  </span>等简单排版操作。
                                </p>
                                <p>还可以在这里加入表格</p>
                                <table style="border-collapse: collapse; width: 100%;" border="1">
                                  <tbody>
                                    <tr>
                                      <td style="width: 33.3333%;">中奖客户</td>
                                      <td style="width: 33.3333%;">发放奖品</td>
                                      <td style="width: 33.3333%;">备注</td>
                                    </tr>
                                    <tr>
                                      <td style="width: 33.3333%;">猪猪</td>
                                      <td style="width: 33.3333%;">内测码</td>
                                      <td style="width: 33.3333%;">
                                        <font color="#fe2525"><i>已经发放</i></font>
                                      </td>
                                    </tr>
                                    <tr>
                                      <td style="width: 33.3333%;">大麦</td>
                                      <td style="width: 33.3333%;">积分</td>
                                      <td style="width: 33.3333%;">
                                        <font color="#2f8fe2">领取地址</font>
                                      </td>
                                    </tr>
                                  </tbody>
                                </table>
                                <div style="margin-bottom: 15px"></div>
                              </div>
                            </div>
                          </div>
                          <div class="btn-edit-del" :class="item.show ? 'selected':''">
                            <el-popconfirm title="您确定删除吗？" @onConfirm="remove(item)">
                              <div class="btn-del" slot="reference">删除</div>
                            </el-popconfirm>
                          </div>
                          <el-tag class="tag-edit cursor-p" @click="formEls(item)">富文本</el-tag>
                        </div>
                      </template>
                      <!-- 搜索框预览 -->
                      <template v-else-if="item.componentType === 15">
                        <div class="drag-box" :id="'picture-'+item.sortNo" :key="'picture-'+index">
                          <div class="drag" :class="item.show ? 'selected':''" @click="formEls(item)">
                            <div class="diy-content diy-s-content" :class="'search-radius-' + item.propMap.searchStyle"
                              :style="'background-color:'+ item.propMap.backgroundColor + ';'">
                              <div class="search-p-bar flex"
                                :class="item.propMap.textAlign == '11' ? 'flex-center' : ''">
                                <label></label>
                                <span>{{ item.propMap.placeholder ? item.propMap.placeholder : '请输入关键词进行搜索' }}</span>
                              </div>
                            </div>
                          </div>
                          <div class="btn-edit-del" :class="item.show ? 'selected':''">
                            <el-popconfirm title="您确定删除吗？" @onConfirm="remove(item)">
                              <div class="btn-del" slot="reference">删除</div>
                            </el-popconfirm>
                          </div>
                          <el-tag class="tag-edit cursor-p" @click="formEls(item)">搜索框</el-tag>
                        </div>
                      </template>
                      <!-- 悬浮按钮预览 -->
                      <template v-else-if="item.componentType === 21">
                        <div class="drag-box floatbtn-drag" :id="'floatbtn-'+item.sortNo" :key="'floatbtn-'+index">
                          <div class="drag" :class="item.show ? 'selected':''" @click="formEls(item)">
                            <div class="diy-content diy-s-content">
                              <ul>
                                <li v-for="(itemBtns, index) in item.floatButtonList" :key="'list-b-' + index"
                                  :class="'list-b-' + item.propMap.showNum" v-if="index < item.propMap.showNum * 1">
                                  <img :src="itemBtns.imgUrl ? itemBtns.imgUrl : defaultBtns" class="width-58 height-58"
                                    border="0px" />
                                </li>
                              </ul>
                            </div>
                          </div>
                          <div class="btn-edit-del" :class="item.show ? 'selected':''">
                            <el-popconfirm title="您确定删除吗？" @onConfirm="remove(item)">
                              <div class="btn-del" slot="reference">删除</div>
                            </el-popconfirm>
                          </div>
                        </div>
                      </template>
                      <!-- 秒杀预览 -->
                      <template v-else-if="item.componentType === 31">
                        <div class="drag-box goods-list" :id="'text-'+item.sortNo" :key="'seckill-'+index">
                          <div class="drag" :class="item.show ? 'selected':''" @click="formEls(item)"
                            :style="{backgroundColor: item.propMap.backgroundColor, padding: item.propMap.verticalMargin + 'px ' + item.propMap.horizontalMargin + 'px'}">
                            <div class="diy-content diy-kill-content">
                              <div v-if="item.propMap.isTitleShow"
                                class="title-bar seck-title flex v-align-c pad-t-12 pad-b-14">
                                <!-- 秒杀标题展示、隐藏判断 -->
                                <h2 class="font-16 font-w mar-b-2"
                                  :style="{backgroundColor: item.propMap.countDownTitleColor}">
                                  <div class="small-title" :style="{'color': item.propMap.titleColor}">
                                    {{ item.propMap.promotionTitle ? item.propMap.promotionTitle : '今日秒杀' }}
                                  </div>
                                </h2>
                                <div v-if="item.propMap.isTitleShow" class="flex-item mar-l-13">
                                  <div class="flex v-align-c font-12 timer">
                                    <div class="timer-t mar-r-5" :style="{'color': item.propMap.titleColor}">仅剩</div>
                                    <span
                                      :style="{color: item.propMap.countDownNumberColor, backgroundColor: item.propMap.countDownTitleColor}">23</span>
                                    <i :style="{'color': item.propMap.titleColor}">天</i>
                                    <span
                                      :style="{color: item.propMap.countDownNumberColor, backgroundColor: item.propMap.countDownTitleColor}">20</span>
                                    <i :style="{'color': item.propMap.titleColor}">:</i>
                                    <span
                                      :style="{color: item.propMap.countDownNumberColor, backgroundColor: item.propMap.countDownTitleColor}">20</span>
                                    <i :style="{'color': item.propMap.titleColor}">:</i>
                                    <span
                                      :style="{color: item.propMap.countDownNumberColor, backgroundColor: item.propMap.countDownTitleColor}">20</span>
                                  </div>
                                </div>
                                <!-- 秒杀查看更多展示、隐藏判断 -->
                                <div v-if="item.propMap.isMoreShow && item.propMap.isTitleShow"
                                  class="flex v-align-c more-seck" :style="{color: item.propMap.showMoreColor}">
                                  <div>查看更多</div>
                                  <icon class="iconfont icon-arrow-right"></icon>
                                </div>
                              </div>
                              <div v-else class="pad-t-13"></div>
                              <ul :class="'show-type-' + item.propMap.promotionStyle"
                                v-if="item.goodsList && item.goodsList.length > 0">
                                <li v-for="(itemGoods, index) in item.goodsList" :key="index"
                                  :class="'goods-style-' + item.propMap.goodsDetailStyle"
                                  v-if="index < item.propMap.firstLoadNum"
                                  :style="{backgroundColor: item.propMap.goodsBackgroundColor, borderRadius: item.propMap.radius + 'px'}">
                                  <template v-if="itemGoods.imgUrl">
                                    <div class="pic-box even">
                                      <div v-if="itemGoods.imgUrl" class="gooods-pic pos-rel del-show">
                                        <img v-show="item.propMap.promotionStyle === '10'"
                                          :src="itemGoods.picUrl ? itemGoods.picUrl : itemGoods.imgUrl" />
                                        <img v-show="item.propMap.promotionStyle !== '10'" :src="itemGoods.imgUrl" />
                                        <template v-if="itemGoods.stock === 0">
                                          <div class="del-layer stock-none">
                                            <label>已售罄</label>
                                          </div>
                                          <div class="del-layer-bg"></div>
                                        </template>
                                      </div>
                                    </div>
                                    <div class="detail-box">
                                      <div class="desc font-15 mar-b-16" :style="{color: item.propMap.goodsTitleColor}">
                                        {{ itemGoods.title }}
                                      </div>
                                      <div class="flex v-align-b info-bar font-12 true">
                                        <div class="flex-item">
                                          <div class="height-s-item">
                                            <div class="tag flex v-align-c">
                                              <label class="label-f">分销</label>
                                              <label class="label-s">赚<span
                                                  class="income-label">{{ itemGoods.distributeIncome }}</span>元</label>
                                            </div>
                                          </div>
                                          <div class="price flex v-align-c">
                                            <div class="flex-item">
                                              <label class="font-19 mar-l--3 label-f font-w">
                                                <span class="tag-xs-t font-12">限时/</span>
                                                <span :style="{color: item.propMap.goodsPriceColor}"><span
                                                    class="mar-r--3">￥</span>{{ itemGoods.price }}</span>
                                              </label>
                                            </div>
                                            <div v-if="item.propMap.buyShow && item.propMap.promotionStyle !== '13'"
                                              class="buy-sty" :class="'buy-sty-' + item.propMap.buyStyle"></div>
                                          </div>
                                        </div>
                                        <button v-if="!item.propMap.buyShow && item.propMap.promotionStyle === '10'"
                                          class="buy-now-type font-12 mar-l-10 mar-b-1" size="mini"
                                          type="primary">立即购买</button>
                                      </div>
                                      <button class="buy-now-type font-12 last-item" size="mini"
                                        type="primary">立即购买</button>
                                    </div>
                                    <div class="pic-box odd">
                                      <div v-if="itemGoods.imgUrl" class="gooods-pic pos-rel del-show">
                                        <img v-show="item.propMap.promotionStyle === '10'"
                                          :src="itemGoods.picUrl ? itemGoods.picUrl : itemGoods.imgUrl" />
                                        <img v-show="item.propMap.promotionStyle !== '10'" :src="itemGoods.imgUrl" />
                                        <template v-if="itemGoods.stock === 0">
                                          <div class="del-layer stock-none">
                                            <label>已售罄</label>
                                          </div>
                                          <div class="del-layer-bg"></div>
                                        </template>
                                      </div>
                                    </div>
                                  </template>
                                  <!-- 默认商品展示 -->
                                  <template v-else>
                                    <div class="pic-box even default-pic-bar">
                                      <div class="gooods-pic pos-rel del-show">
                                        <img :src="goodsDefault" border="0px">
                                      </div>
                                    </div>
                                    <div class="detail-box">
                                      <div class="desc font-15 mar-b-16">这里是商品标题</div>
                                      <div class="flex v-align-b info-bar font-12 true">
                                        <div class="flex-item">
                                          <div class="height-s-item">
                                            <!-- 分享赚，只有查看自己店铺并且分销佣金大于0可见 -->
                                            <div class="tag flex v-align-c">
                                              <label class="label-f">分销</label>
                                              <label class="label-s">赚<span class="income-label">10</span>元</label>
                                            </div>
                                          </div>
                                          <div class="price flex v-align-c">
                                            <div class="flex-item">
                                              <label class="font-19 mar-l--3 label-f font-w">
                                                <span class="tag-xs-t font-12">限时/</span>
                                                <span class="mar-r--3">￥</span>100
                                              </label>
                                            </div>
                                            <div v-if="item.propMap.buyShow && item.propMap.promotionStyle !== '13'"
                                              class="buy-sty" :class="'buy-sty-' + item.propMap.buyStyle"></div>
                                          </div>
                                        </div>
                                        <button v-if="!item.propMap.buyShow && item.propMap.promotionStyle === '10'"
                                          class="buy-now-type font-12 mar-l-10 mar-b-1" size="mini"
                                          type="primary">立即购买</button>
                                      </div>
                                    </div>
                                    <div class="pic-box odd default-pic-bar">
                                      <div class="gooods-pic pos-rel del-show">
                                        <img :src="goodsDefault" border="0px">
                                      </div>
                                    </div>
                                  </template>
                                </li>
                              </ul>
                            </div>
                          </div>
                          <div class="btn-edit-del" :class="item.show ? 'selected':''">
                            <el-popconfirm title="您确定删除吗？" @onConfirm="remove(item)">
                              <div class="btn-del" slot="reference">删除</div>
                            </el-popconfirm>
                          </div>
                          <el-tag class="tag-edit cursor-p" @click="formEls(item)">秒杀组</el-tag>
                        </div>
                      </template>
                      <!-- 社区团购预览 -->
                      <template v-else-if="item.componentType === 32 && item.componentPromotionItemList">
                        <div class="drag-box goods-list group-buy-bar" :key="'seckill-'+index"
                          :id="'text-'+item.sortNo">
                          <div class="drag" :class="item.show ? 'selected':''" @click="formEls(item)">
                            <div class="diy-content diy-kill-content">
                              <div class="group-buy-bg mar-l-12 mar-r-12">
                                <div class="title-bar seck-title text-align-c">
                                  <h2 v-for="(itemG, indexG) in item.componentPromotionItemList" :key="indexG"
                                    class="text-align-c">
                                    <div class="small-title font-12 font-w" :style="{'color': item.propMap.titleColor}">
                                      <span v-if="itemG.titleName === ''"> {{ itemG.title.slice(0, 5) }}</span>
                                      <span v-else> {{ itemG.titleName }}</span>
                                    </div>
                                    <div v-if="itemG.promotionStatus === 2" class="font-12 promotionStatusStyle">进行中
                                    </div>
                                    <div
                                      v-else-if="item.componentPromotionItemList && item.componentPromotionItemList.length !== 1"
                                      class="font-12">{{itemG.startTime.slice(11, 16)}}开始</div>
                                  </h2>
                                  <div
                                    v-if="item.componentPromotionItemList && item.componentPromotionItemList.length === 1"
                                    class="flex-item"></div>
                                  <div
                                    v-if="item.componentPromotionItemList && item.componentPromotionItemList.length === 1">
                                    {{item.componentPromotionItemList[0].startTime.slice(11, 16)}}开始
                                  </div>
                                </div>
                                <div class="group-content-bar"
                                  :style="{backgroundColor: item.propMap.boxBackgroundColor}">
                                  <ul :class="'show-type-' + item.propMap.promotionStyle"
                                    v-if="item.componentPromotionItemList && item.componentPromotionItemList.length > 0 && item.componentPromotionItemList[0].componentGoodsList">
                                    <li v-if="index < item.propMap.firstLoadNum"
                                      v-for="(itemGoods, index) in item.componentPromotionItemList[0].componentGoodsList"
                                      :key="index" :class="'goods-style-' + item.propMap.goodsDetailStyle"
                                      :style="{backgroundColor: item.propMap.goodsBackgroundColor, borderRadius: item.propMap.radius + 'px'}">
                                      <template v-if="itemGoods.imgUrl">
                                        <div class="pic-box">
                                          <div v-if="itemGoods.imgUrl" class="gooods-pic pos-rel del-show">
                                            <div class="limit-buy-bar" :style="{color: item.propMap.limitNumColor}">
                                              限购{{itemGoods.limitNum}}件</div>
                                            <img v-show="item.propMap.promotionStyle === '10'"
                                              :src="itemGoods.picUrl ? itemGoods.picUrl : itemGoods.imgUrl"
                                              :style="{borderRadius: item.propMap.radius + 'px'}" />
                                            <img v-show="item.propMap.promotionStyle !== '10'" :src="itemGoods.imgUrl"
                                              :style="{borderRadius: item.propMap.radius + 'px'}" />
                                            <template v-if="itemGoods.stock === 0">
                                              <div class="del-layer stock-none">
                                                <label>已售罄</label>
                                              </div>
                                              <div class="del-layer-bg"></div>
                                            </template>
                                          </div>
                                        </div>
                                        <div class="detail-box">
                                          <div class="desc font-15 mar-b-16 line-1"
                                            :style="{color: item.propMap.goodsTitleColor}">
                                            {{ itemGoods.title }}
                                          </div>
                                          <div
                                            :class="item.propMap.promotionStyle === '10' ? 'v-align-c pad-t-10' : 'v-align-b'"
                                            class="flex info-bar font-12 true">
                                            <div class="flex-item">
                                              <div class="price flex v-align-c">
                                                <div :class="item.propMap.promotionStyle === '10' ? 'mar-t--3' : ''"
                                                  class="flex-item price-line">
                                                  <label class="font-18 mar-r--1 label-f label-snormal"
                                                    :style="{color: item.propMap.goodsPriceColor}">
                                                    <span>￥</span>{{ itemGoods.price }}
                                                  </label>
                                                  <label class="font-12 label-f label-sline"
                                                    :style="{color: item.propMap.goodsScribingPriceColor}">
                                                    <span>￥</span>{{ itemGoods.price }}
                                                  </label>
                                                </div>
                                              </div>
                                              <div
                                                v-if="item.propMap.promotionStyle !== '10' && item.propMap.promotionStyle !== '12'"
                                                class="buy-cart-btn font-12 pad-t-7 pad-b-7"
                                                :style="{backgroundColor: item.propMap.btnBuyCartColor}">
                                                <template v-if="item.componentPromotionItemList[0].buttonName">
                                                  {{ item.componentPromotionItemList[0].buttonName }}
                                                </template>
                                                <template v-else>
                                                  加入购物车
                                                </template>
                                              </div>
                                            </div>
                                            <div
                                              v-if="item.propMap.promotionStyle === '10' || item.propMap.promotionStyle === '12'"
                                              class="buy-cart-btn font-12 pad-t-9 pad-b-9"
                                              :class="item.propMap.promotionStyle === '10' ? 'width-100' : ''"
                                              :style="{backgroundColor: item.propMap.btnBuyCartColor}">
                                              <template v-if="item.componentPromotionItemList[0].buttonName">
                                                {{ item.componentPromotionItemList[0].buttonName }}
                                              </template>
                                              <template v-else>
                                                加入购物车
                                              </template>
                                            </div>
                                          </div>
                                        </div>
                                      </template>
                                      <!-- 默认商品展示 -->
                                      <template v-else>
                                        <div class="pic-box default-pic-bar">
                                          <div class="gooods-pic pos-rel del-show">
                                            <div class="limit-buy-bar" :style="{color: item.propMap.limitNumColor}">
                                              限购10件</div>
                                            <img :src="goodsDefault"
                                              :style="{borderRadius: item.propMap.radius + 'px'}">
                                          </div>
                                        </div>
                                        <div class="detail-box">
                                          <div class="desc font-15 mar-b-16"
                                            :style="{color: item.propMap.goodsTitleColor}">这里是商品标题</div>
                                          <div
                                            :class="item.propMap.promotionStyle === '10' ? 'v-align-c pad-t-10' : 'v-align-b'"
                                            class="flex info-bar font-12 true">
                                            <div class="flex-item">
                                              <div class="price flex v-align-c">
                                                <div :class="item.propMap.promotionStyle === '10' ? 'mar-t--3' : ''"
                                                  class="flex-item price-line">
                                                  <label class="font-18 mar-r--1 label-f label-snormal"
                                                    :style="{color: item.propMap.goodsPriceColor}">
                                                    <span>￥</span>10
                                                  </label>
                                                  <label class="font-12 label-f label-sline"
                                                    :style="{color: item.propMap.goodsScribingPriceColor}">
                                                    <span>￥</span>12
                                                  </label>
                                                </div>
                                              </div>
                                              <div v-if="item.propMap.promotionStyle !== '10'"
                                                class="buy-cart-btn font-12 pad-t-7 pad-b-7"
                                                :style="{backgroundColor: item.propMap.btnBuyCartColor}">加入购物车</div>
                                            </div>
                                            <div v-if="item.propMap.promotionStyle === '10'"
                                              class="buy-cart-btn font-12 pad-t-9 pad-b-9"
                                              :class="item.propMap.promotionStyle === '10' ? 'width-100' : ''"
                                              :style="{backgroundColor: item.propMap.btnBuyCartColor}">加入购物车</div>
                                          </div>
                                        </div>
                                      </template>
                                    </li>
                                  </ul>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="btn-edit-del" :class="item.show ? 'selected':''">
                            <el-popconfirm title="您确定删除吗？" @onConfirm="remove(item)">
                              <div class="btn-del" slot="reference">删除</div>
                            </el-popconfirm>
                          </div>
                          <el-tag class="tag-edit cursor-p" @click="formEls(item)">社区团购</el-tag>
                        </div>
                      </template>
                      <!-- 小程序直播预览 -->
                      <template v-else-if="item.componentType === 30 && customPage.appType == 10">
                        <div class="drag-box" :id="'picture-'+item.sortNo" :key="'picture-'+index">
                          <div class="drag" :class="item.show ? 'selected':''" @click="formEls(item)">
                            <div class="diy-content diy-l-content" :class="'live-style-'+item.propMap.showStyle">
                              <!-- 直播标题展示、隐藏判断 -->
                              <div v-if="item.propMap.isTitleShow" class="flex v-align-c live-title">
                                <div class="font-16 font-w">
                                  {{ item.propMap.liveTitle ? item.propMap.liveTitle : '今日直播' }}
                                </div>
                                <div class="flex-item"></div>
                                <div v-if="item.propMap.isMoreShow" class="live-more">
                                  <span class="flex v-align-c">
                                    <i>查看更多</i>
                                    <u></u>
                                  </span>
                                </div>
                              </div>
                              <div class="live-img">
                                <img v-if="item.propMap.showType === '10'" :src="liveBg1" class="width-per-100"
                                  border="0" />
                                <img v-if="item.propMap.showType === '11'" :src="liveBg2" class="width-per-100"
                                  border="0" />
                                <img v-if="item.propMap.showType === '12'" :src="liveBg3" class="width-per-100"
                                  border="0" />
                              </div>
                            </div>
                          </div>
                          <div class="btn-edit-del" :class="item.show ? 'selected':''">
                            <el-popconfirm title="您确定删除吗？" @onConfirm="remove(item)">
                              <div class="btn-del" slot="reference">删除</div>
                            </el-popconfirm>
                          </div>
                          <el-tag class="tag-edit cursor-p" @click="formEls(item)">小程序直播</el-tag>
                        </div>
                      </template>
                      <!-- 内容组件预览 -->
                      <template v-else-if="item.componentType === 40">
                        <div class="drag-box" :id="'content-'+item.sortNo" :key="'content-'+index">
                          <div class="drag" :class="item.show ? 'selected':''" @click="formEls(item)">
                            <div class="diy-l-content content-center">
                              <!-- 内容组件标题展示、隐藏判断 -->
                              <div v-if="item.propMap.isTitleShow" class="flex v-align-c content-title">
                                <div class="font-18 font-w">
                                  {{ item.propMap.contentTitle ? item.propMap.contentTitle : '今日推荐' }}
                                </div>
                                <div class="flex-item"></div>
                                <div v-if="item.propMap.isShowMore" class="content-more font-12">
                                  <span class="flex v-align-c">查看更多<i class="el-icon-arrow-right"></i></span>
                                </div>
                              </div>
                              <div class="content-item mar-t-15 mar-l-15 pad-r-15 pad-b-15"
                                v-for="(content, contentIndex) in item.contentList" :key="contentIndex">
                                <div class="flex-between-t">
                                  <div class="pos-rel">
                                    <img class="width-125 height-70" :src="content.coverUrl" alt="">
                                    <img class="width-24 height-24 play-layer"
                                      src="https://veekrayimg.joinsun.vip/images/content-play-layer.png" alt=""
                                      v-if="content.contentType === 2">
                                    <div class="invalid-layer" v-if="content.status === 0">
                                      <div class="invalid-text">已禁用</div>
                                    </div>
                                  </div>
                                  <div class="flex-between-col mar-l-10">
                                    <div class="line-2 font-w">{{content.contentName}}</div>
                                    <div class="flex flex-between font-color-6 font-13 mar-b-3" style="width: 100%;">
                                      <span>{{content.createTime | filterTime}}</span>
                                      <div class="v-align-c">
                                        <i class="el-icon-view font-16" v-if="content.contentType === 1"></i>
                                        <i class="el-icon-video-play font-16" v-if="content.contentType === 2"></i>
                                        <span class="mar-l-3 width-26">{{content.accessCount}}</span>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="btn-edit-del" :class="item.show ? 'selected':''">
                            <el-popconfirm title="您确定删除吗？" @onConfirm="remove(item)">
                              <div class="btn-del" slot="reference">删除</div>
                            </el-popconfirm>
                          </div>
                          <el-tag class="tag-edit cursor-p" @click="formEls(item)">知识内容</el-tag>
                        </div>
                      </template>
                      <!-- 热搜推荐预览 -->
                      <template v-else-if="item.componentType === 33">
                        <div class="drag-box" :key="'seckill-'+index" :id="'text-'+item.sortNo">
                          <div class="drag" :class="item.show ? 'selected':''" @click="formEls(item)">
                            <div class="diy-content diy-t-bar">
                              <ul class="words-list">
                                <li class="pad-l-5 pad-r-5 mar-r-5 font-12" :style="{color: wordsItem.wordsColor}"
                                  v-for="(wordsItem, wordsIndex) in item.wordsList" :key="wordsIndex">
                                  <span>{{ wordsItem.wordsName }}</span>
                                  <i :style="{
                                      opacity: item.propMap.opacity === 100 ? '1' : '0.' + item.propMap.opacity,
                                      backgroundColor: item.propMap.wordsBackground
                                    }"></i>
                                </li>
                              </ul>
                            </div>
                          </div>
                          <div class="btn-edit-del" :class="item.show ? 'selected':''">
                            <el-popconfirm title="您确定删除吗？" @onConfirm="remove(item)">
                              <div class="btn-del" slot="reference">删除</div>
                            </el-popconfirm>
                          </div>
                          <el-tag class="tag-edit cursor-p" @click="formEls(item)">热搜推荐</el-tag>
                        </div>
                      </template>
                    </template>
                  </draggable>
                  <!-- 全部商品 -->
                  <template v-if="appType === 13">
                    <div class="drag-box">
                      <div class="drag" @click="formCheckEls">
                        <div class="diy-content diy-p-content">
                          <div class="picture-p-default">
                            <img :src="allProductDefault" border="0px">
                          </div>
                        </div>
                      </div>
                      <el-tag class="tag-edit cursor-p" @click="formCheckEls">全部商品</el-tag>
                    </div>
                  </template>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
    <!-- 店铺装修结束 -->
    <!-- 店铺风格开始 -->
    <template v-else-if="navType === 11">
      <shop-style :customPage="customPage"></shop-style>
    </template>
    <!-- 店铺风格结束 -->
    <!-- 店铺导航开始 -->
    <template v-else-if="navType === 12">
      <bottom-nav :customPage="customPage"></bottom-nav>
    </template>
    <!-- 店铺导航结束 -->
    <!-- 历史搜索开始 -->
    <template v-else-if="navType === 13">
      <history-search :customPage="customPage"></history-search>
    </template>
    <!-- 历史搜索结束 -->

    <!-- 首页弹窗开始 -->
    <template v-else-if="navType === 14">
      <ad-popups :customPage="customPage"></ad-popups>
    </template>
    <!-- 首页弹窗结束 -->
    <!-- 右侧组件信息栏 -->
    <div class="side-right"
      :class="pageType === 10 && navType !== 11 && navType !== 13 && navType !== 14 ? 'home' : ''">
      <div v-show="boxFormBoolean">
        <!-- 主播商品表单组件 -->
        <component-goods-anchor-form v-if="type === 20 && appType === 13" @scrollBottom="scrollBottom"
          :details1="details" :appType="appType"></component-goods-anchor-form>
        <!-- 主播全部商品表单组件 -->
        <component-all-product-form v-if="type === 100 && appType === 13"></component-all-product-form>
        <!-- 云店社区自提点表单组件 -->
        <component-group-address-form v-if="type === 101"></component-group-address-form>
        <!-- 云店、批发商品表单组件 -->
        <component-goods-form v-if="type === 20 && appType !== 13" @scrollBottom="scrollBottom" :details1="details"
          :appType="appType" :homeType="homeType" :warehouseId="customPage.warehouseId"></component-goods-form>
        <!-- 辅助分割组件 -->
        <component-auxiliary-dividing v-if="type === 22" :details1="details"></component-auxiliary-dividing>
        <!-- 图片表单组件 -->
        <component-picture-form v-if="type === 12" :details1="details" :appType="customPage.appType * 1">
        </component-picture-form>
        <!-- 按钮组组件 -->
        <component-btns-form v-if="type === 11" :details1="details" :appType="customPage.appType * 1">
        </component-btns-form>
        <!-- 标题组件 -->
        <component-title-form v-if="type === 13" :details1="details" :appType="customPage.appType * 1">
        </component-title-form>
        <!-- 视频表单组件 -->
        <component-video-form v-if="type === 16" :details1="details"></component-video-form>
        <!-- 音频表单组件 -->
        <component-audio-form v-if="type === 17" :details1="details"></component-audio-form>
        <!-- 文本表单组件 -->
        <component-text-form v-if="type === 14" :details1="details"></component-text-form>
        <!-- 搜索框组件 -->
        <component-search-form v-if="type === 15" :details1="details"></component-search-form>
        <!-- 悬浮按钮组件 -->
        <component-floatbtn-form v-if="type === 21" :details1="details" :appType="customPage.appType * 1">
        </component-floatbtn-form>
        <!-- 秒杀组件 -->
        <component-seckill-form v-if="type === 31" :details1="details"></component-seckill-form>
        <!-- 社区团购组件 -->
        <component-group-buy-form v-if="type === 32" :details1="details"></component-group-buy-form>
        <!-- 热搜推荐组件 -->
        <component-recommend-search-form v-if="type === 33" :details1="details" :appType="customPage.appType * 1">
        </component-recommend-search-form>
        <!-- 小程序直播组件 -->
        <component-live-form v-if="type === 30" :details1="details"></component-live-form>
        <!-- 内容中心组件 -->
        <component-content-center v-if="type === 40" :details1="details"></component-content-center>
        <!-- 标签导航组件 -->
        <component-topnav-form v-if="type === 41" :details1="details" :appType="customPage.appType * 1">
        </component-topnav-form>
        <!-- 全局设置组件 -->
        <component-page-form v-if="otherType === 1" :customPage1="customPage"></component-page-form>
        <!-- 主播小程序标题栏组件 -->
        <component-mptitle-anchor-form v-if="otherType === 2 && appType === 13" :customPage1="customPage">
        </component-mptitle-anchor-form>
        <!-- 云店、批发小程序标题栏组件 -->
        <component-mptitle-form v-if="otherType === 2 && appType !== 13" :customPage1="customPage">
        </component-mptitle-form>
        <!-- 店主主页入口栏组件 -->
        <component-topbar-form v-if="otherType === 3" :customPage1="customPage"></component-topbar-form>
        <!-- 图片轮播组件 -->
        <component-carousel-form v-if="otherType === 4 || type === 19" :details1="details"
          :appType="customPage.appType * 1"></component-carousel-form>
        <!-- 全店风格组件 -->
        <component-template-form v-if="navType === 11" :customPage1="customPage"></component-template-form>
        <!-- 底部导航组件 -->
        <component-bottomnav-form v-if="navType === 12" :customPage1="customPage" :appType="customPage.appType * 1">
        </component-bottomnav-form>
        <!-- 历史搜索组件 -->
        <component-history-search-form v-if="navType === 13" :customPage1="customPage"></component-history-search-form>
        <!-- 首页弹窗 -->
        <component-ad-popups v-if="navType === 14" :customPage1="customPage"></component-ad-popups>
      </div>
    </div>

    <el-dialog title="" :visible.sync="codeVisible" :close-on-press-escape="true" width="400px"
      v-on:close="closeWxaCode">
      <div>
        <img :src="wxaCode" v-if="wxaCode" style="width: 400px">
      </div>
      <div slot="footer" class="dialog-footer">
        <span>用微信“扫一扫”扫描上方二维码</span><br>
        <span>查看编辑效果</span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import SideLeft from './components/SideLeft'
  import ShopStyle from './components/ShopStyle'
  import BottomNav from './components/BottomNav'
  import HistorySearch from './components/HistorySearch'
  import AdPopups from './components/AdPopups'
  import Navbar from './components/Navbar'
  import elDragDialog from '@/directive/el-dragDialog'
  import draggable from 'vuedraggable'
  import swiperPicture from '@/components/Swiper'
  import ComponentAdPopups from './components/ComponentAdPopups'
  import ComponentGoodsAnchorForm from './components/ComponentGoodsAnchorForm'
  import ComponentAllProductForm from './components/ComponentAllProductForm'
  import ComponentGroupAddressForm from './components/ComponentGroupAddressForm'
  import ComponentGoodsForm from './components/ComponentGoodsForm'
  import ComponentPictureForm from './components/ComponentPictureForm'
  import ComponentBtnsForm from './components/ComponentBtnsForm'
  import ComponentTitleForm from './components/ComponentTitleForm'
  import ComponentVideoForm from './components/ComponentVideoForm'
  import ComponentAudioForm from './components/ComponentAudioForm'
  import ComponentTextForm from './components/ComponentTextForm'
  import ComponentSearchForm from './components/ComponentSearchForm'
  import ComponentFloatbtnForm from './components/ComponentFloatbtnForm'
  import ComponentSeckillForm from './components/ComponentSeckillForm'
  import ComponentGroupBuyForm from './components/ComponentGroupBuyForm'
  import ComponentRecommendSearchForm from './components/ComponentRecommendSearchForm'
  import ComponentLiveForm from './components/ComponentLiveForm'
  import ComponentPageForm from './components/ComponentPageForm'
  import ComponentMptitleAnchorForm from './components/ComponentMptitleAnchorForm'
  import ComponentMptitleForm from './components/ComponentMptitleForm'
  import ComponentTopbarForm from './components/ComponentTopbarForm'
  import ComponentCarouselForm from './components/ComponentCarouselForm'
  import ComponentTemplateForm from './components/ComponentTemplateForm'
  import ComponentHistorySearchForm from './components/ComponentHistorySearchForm'
  import ComponentAuxiliaryDividing from './components/ComponentAuxiliaryDividing'
  import ComponentContentCenter from './components/ComponentContentCenter'
  import ComponentBottomnavForm from './components/ComponentBottomnavForm'
  import ComponentTopnavForm from './components/ComponentTopnavForm'
  import pictureDefault from '@/assets/images/picture.png'
  import videoDefault from '@/assets/images/video.png'
  import audioDefault from '@/assets/images/audio.png'
  import goodsDefault from '@/assets/images/goods.png'
  import defaultBtns from '@/assets/images/picture-btns.png'
  import defaultFloatOneBtns from '@/assets/images/float-btns-1.png'
  import defaultFloatTwoBtns from '@/assets/images/float-btns-2.png'
  import liveBg1 from '@/assets/images/live-bg-1.jpg'
  import liveBg2 from '@/assets/images/live-bg-2.jpg'
  import liveBg3 from '@/assets/images/live-bg-3.jpg'
  import allProductDefault from '@/assets/images/all-product-pic.jpg'
  import anchorTitleTop from '@/assets/images/goods-title-top.png'
  import iconsUser from '@/assets/images/icons-user-1.png'
  import groupBarPic from '@/assets/images/group-bar-pic.png'
  import groupPic21 from '@/assets/images/goods-default-pic-21.png'
  import groupPic22 from '@/assets/images/goods-default-pic-22.png'
  import groupPic23 from '@/assets/images/goods-default-pic-23.png'
  import groupPic24 from '@/assets/images/goods-default-pic-24.png'
  import groupPic25 from '@/assets/images/goods-default-pic-25.png'
  import {
    getPage,
    saveCustomPage,
    publishCustomPage,
    saveSearchPageHotWord,
    getHotWordList
  } from '@/api/custom-page/page'
  import {
    doHomeWxaCode,
    doPreviewWxaCode
  } from '@/api/user/enterprise'
  import {
    checkAccessToken,
    commit
  } from '@/api/system/wechat'
  import {
    swiper,
    swiperSlide
  } from 'vue-awesome-swiper'
  require('swiper/dist/css/swiper.css')

  export default {
    components: {
      swiper,
      swiperSlide,
      SideLeft,
      ShopStyle,
      HistorySearch,
      AdPopups,
      BottomNav,
      Navbar,
      draggable,
      swiperPicture,
      ComponentAdPopups,
      ComponentGoodsAnchorForm,
      ComponentAllProductForm,
      ComponentGroupAddressForm,
      ComponentGoodsForm,
      ComponentPictureForm,
      ComponentBtnsForm,
      ComponentTitleForm,
      ComponentVideoForm,
      ComponentAudioForm,
      ComponentTextForm,
      ComponentSearchForm,
      ComponentFloatbtnForm,
      ComponentSeckillForm,
      ComponentGroupBuyForm,
      ComponentRecommendSearchForm,
      ComponentLiveForm,
      ComponentPageForm,
      ComponentMptitleAnchorForm,
      ComponentMptitleForm,
      ComponentTopbarForm,
      ComponentCarouselForm,
      ComponentTemplateForm,
      ComponentHistorySearchForm,
      ComponentAuxiliaryDividing,
      ComponentContentCenter,
      ComponentBottomnavForm,
      ComponentTopnavForm
    },
    directives: {
      elDragDialog
    },
    data() {
      const that = this
      return {
        imgIndex: 1,
        swiperOption: {
          slidesPerGroup: 3,
          slidesPerView: 3,
          spaceBetween: 5,
          notNextTick: true,
          loop: true,
          initialSlide: 0,
          autoplay: {
            delay: 1500,
            stopOnLastSlide: false,
            disableOnInteraction: false
          },
          speed: 800,
          direction: 'horizontal',
          grabCursor: true,
          on: {
            slideChangeTransitionStart: function() {
              that.imgIndex = this.realIndex - 1
            }
          },
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
            type: 'bullets'
          }
        },
        loading: '',
        sortNo: 0,
        type: 0,
        otherType: 0,
        contentInfo: {},
        listDetails: [],
        boxFormBoolean: false,
        pictureDefault: pictureDefault,
        videoDefault: videoDefault,
        audioDefault: audioDefault,
        goodsDefault: goodsDefault,
        liveBg1: liveBg1,
        liveBg2: liveBg2,
        liveBg3: liveBg3,
        allProductDefault: allProductDefault,
        anchorTitleTop: anchorTitleTop,
        groupBarPic: groupBarPic,
        details: {
          detailsId: '',
          pageId: '',
          sortNo: 0,
          componentType: 0,
          backColor: '',
          propMap: {},
          goodsList: [],
          componentPromotionItemList: [],
          isClickPromotionGroup: false,
          swiperList: [{
            imgUrl: '',
            linkRemark: '',
            linkType: '',
            linkParams: ''
          }],
          pictureList: [],
          contentList: [],
          topNavList: [],
          buttonGroupList: [],
          wordsList: [],
          btnGroup: [],
          video: {
            videoId: '',
            detailsId: '',
            videoStyle: '1',
            videoImg: '',
            videoName: '',
            videoUrl: ''
          },
          audio: {
            audioId: '',
            detailsId: '',
            title: '',
            subtitle: '',
            loopPlayback: '0',
            autoPlayback: '0',
            autoDuration: ''
          },
          text: {
            textId: '',
            detailsId: '',
            content: '',
            textSize: '',
            textShape: '',
            textAlign: '',
            textColor: ''
          }
        },
        customPage: {
          pageId: '',
          mpPageTitle: '',
          enterpriseId: this.getEnterpriseId(),
          pageType: 11,
          backgroundColor: '#FFFFFF',
          shareTitle: '',
          sharePicUrl: '',
          backgroundPicUrl: '',
          pageTitle: '',
          mpPageSearchTxt: '搜索商品',
          searchFlag: '0',
          titleCenter: '10',
          titleType: '10',
          titleFontColor: '#000000',
          titleBackgroundColor: '#ffffff',
          mpTitleShow: false,
          topbarShow: false,
          carouselShow: false,
          swiperProps: {
            swiperStyle: '10',
            verticalMargin: 0,
            horizontalMargin: 0,
            radius: 0
          },
          swiperList: [{
            imgUrl: '',
            linkRemark: '',
            linkType: '',
            linkParams: ''
          }],
          detailsList: [],
          style: {
            styleType: 10
          },
          historyWords: {
            hotWordsList: [],
            normalWordsList: []
          },
          AdImgList: {
            popupsStatus: 'on',
            showSetting: '1',
            intervalTime: 0,
            imgList: [{
              imgUrl: '',
              linkRemark: ''
            }]
          },
          homeFontColor: '#000000',
          homeBackgroundColor: '#FFFFFF',
          homeStyle: '10',
          iconUrl: '',
          iconWidth: 0,
          iconHeight: 0,
          bottomNavList: [],
          shopNameFormat: '', // 店铺名称
          warehouseId: ''
        },
        defaultBtns: defaultBtns,
        defaultFloatOneBtns: defaultFloatOneBtns,
        defaultFloatTwoBtns: defaultFloatTwoBtns,
        wxaCode: '',
        shopHomeWxaCode: '',
        shopPreviewWxaCode: '',
        codeVisible: false,
        pageType: null,
        // 店主主页
        navType: 10,
        navList: [],
        appType: 10,
        shopHomeFlag: 0,
        nullEdit: false,
        iconsUser: iconsUser,
        groupBuyAddressBar: false,
        homeType: null,
        groupPic21: groupPic21,
        groupPic22: groupPic22,
        groupPic23: groupPic23,
        groupPic24: groupPic24,
        groupPic25: groupPic25
      }
    },
    filters: {
      filterTime(val) {
        return val.slice(0, val.length - 3)
      }
    },
    watch: {
      'type'(val) {
        this.type = val
        if (val) {
          this.otherType = 0
          this.boxFormBoolean = true
        }
      }
    },
    created() {
      const queryParams = this.getCurrentPage().query
      this.pageType = Number(queryParams.pageType)
      this.appType = Number(queryParams.appType)
      this.homeType = Number(queryParams.homeType)
      if (!queryParams.navType || Number(queryParams.navType) === 10) {
        // 装修
        this.navType = 10
      }
      if (Number(queryParams.navType) === 11) {
        // 风格
        this.navType = 11
      } else if (Number(queryParams.navType) === 12) {
        // 导航
        this.navType = 12
      } else if (Number(queryParams.navType) === 13) {
        // 搜索
        this.navType = 13
      } else if (Number(queryParams.navType) === 14) {
        // 弹窗
        this.navType = 14
      }
      if (this.navType === 13) {
        this.navList = []
        this.navList.push({
          name: '搜索',
          navType: 13,
          show: true
        })
      } else {
        this.navList = [{
          name: '装修',
          navType: 10,
          show: true
        }]
        if (this.appType === 10) {
          this.navList.push({
            name: '风格',
            navType: 11,
            show: false
          })
        }
        // 首页弹窗入口隐藏、这期暂时不开放
        // this.navList.push({
        //   name: '弹窗', navType: 14, show: false
        // })
        // this.navList.push({
        //   name: '搜索', navType: 13, show: false
        // })
      }

      // 云店都展示左侧导航
      // if (this.pageType === 10 && this.appType === 10) {
      //   this.navList.push({
      //     name: '导航', navType: 12, show: false
      //   })
      // }
      // 提货点信息栏
      this.groupBuyAddressBar = this.getEnterpriseConfig().groupBuyAuthority * 1 === 1 && this.appType * 1 === 10 &&
        this.pageType * 1 === 10 && this.homeType * 1 !== 1
    },
    mounted() {
      // 热门搜索页面不需要查询装修数据
      const queryParams = this.getCurrentPage().query
      if (queryParams.navType !== '13' && queryParams.navType !== 13) {
        const type = this.getVersionType() * 1 === 5 ? 12 : this.appType
        doHomeWxaCode(this.getEnterpriseId(), type).then(response => {
          if (response.isError) return
          this.shopHomeWxaCode = response.data
        })
        this.init()
        if (this.appType === 13) {
          this.customPage.titleFontColor = '#FFFFFF'
          this.customPage.titleBackgroundColor = '#7427ff'
        }
      } else {
        this.boxFormBoolean = true
        const data = {}
        data.enterpriseId = this.getEnterpriseId()
        getHotWordList(data).then(response => {
          if (response.isError) return
          const historyWordsList = response.data
          if (historyWordsList && historyWordsList.length > 0) {
            if (!this.customPage.historyWords) {
              this.customPage.historyWords = {}
            }
            if (!this.customPage.historyWords.hotWordsList) {
              this.customPage.historyWords.hotWordsList = []
            }
            if (!this.customPage.historyWords.normalWordsList) {
              this.customPage.historyWords.normalWordsList = []
            }
            for (let i = 0; i < historyWordsList.length; i++) {
              const historyWords = historyWordsList[i]
              if (historyWords && historyWords.type === 1) {
                this.customPage.historyWords.normalWordsList.push(historyWords)
              }
              if (historyWords && historyWords.type === 2) {
                this.customPage.historyWords.hotWordsList.push(historyWords)
              }
            }
            this.$bus.$emit('resetHistorySearch', this.customPage.historyWords)
          }
        })
      }
    },
    methods: {
      init() {
        const queryParams = this.getCurrentPage().query
        if (queryParams.pageId) {
          this.customPage.pageId = queryParams.pageId
          getPage(queryParams.pageId, this.appType).then(response => {
            if (response.isError) return
            const bottomNavList = this.customPage.bottomNavList

            Object.assign(this.customPage, response.data)
            if (this.customPage.bottomNavList.length === 0) {
              this.customPage.bottomNavList = bottomNavList
            }
            this.$bus.$emit('resetStyle', this.customPage.style)
            this.listDetails = this.customPage.detailsList
            this.listDetails.forEach((item, index) => {
              if (item.componentType === 31 || item.componentType === 20) {
                if (item.propMap.buyShow && item.propMap.buyShow === 'true') {
                  item.propMap.buyShow = true
                }
                if (item.propMap.buyShow && item.propMap.buyShow === 'false') {
                  item.propMap.buyShow = false
                }
                if (item.propMap.isMoreShow === 'true') {
                  item.propMap.isMoreShow = true
                } else {
                  item.propMap.isMoreShow = false
                }
                if (item.propMap.isTitleShow === 'true') {
                  item.propMap.isTitleShow = true
                } else {
                  item.propMap.isTitleShow = false
                }
                if (item.componentType === 20) {
                  if (!item.propMap.selectType) {
                    item.propMap.selectType = '10'
                  }
                  // 自动选择商品
                  if (item.propMap.selectType === '11') {
                    item.goodsList = item.goodsPage.records
                  }
                  if (item.propMap.goodsStyle === '14' && !item.propMap.backgroundImg) {
                    item.propMap.backgroundImg = 'http://veekrayimg.joinsun.vip/images/anchor-hot-bg.png'
                  }
                }
              } else if (item.componentType === 13) {
                if (!item.propMap.titleStyle) {
                  item.propMap.titleStyle = '10'
                }
              } else if (item.componentType === 11) {
                if (!item.propMap.pageNum) {
                  item.propMap.pageNum = '1'
                }
                this.btnGroupTs(item)
              } else if (item.componentType === 12) {
                if (item.propMap.picStyle === '11') {
                  setTimeout(() => {
                    item.propMap.height = document.getElementById('picture-box-' + index).clientHeight - (
                      item.propMap.verticalMargin * 2)
                    const changeStock = item.propMap.height
                    this.$delete(item, 'height')
                    this.$set(item, 'height', changeStock)
                  }, 100)
                }
              } else if (item.componentType === 30) {
                if (item.propMap.isMoreShow === 'true') {
                  item.propMap.isMoreShow = true
                } else {
                  item.propMap.isMoreShow = false
                }
                if (item.propMap.isTitleShow === 'true') {
                  item.propMap.isTitleShow = true
                } else {
                  item.propMap.isTitleShow = false
                }
                if (!item.propMap.showType && !item.propMap.showStyle && !item.propMap.liveStyle) {
                  item.propMap.showType = '10'
                  item.propMap.showStyle = '10'
                  item.propMap.liveStyle = '10'
                  item.propMap.liveAddType = '10'
                  item.propMap.firstLoadNum = 1
                  item.propMap.liveNum = '10'
                }
              } else if (item.componentType === 32) {
                if (item.propMap.selectType === '11' && item.componentPromotionItemList === undefined) {
                  // 为了解决旧数据显示的问题
                  item.propMap.selectType = '10'
                }
              } else if (item.componentType === 40) {
                if (item.propMap.isShowMore === 'true') {
                  item.propMap.isShowMore = true
                } else {
                  item.propMap.isShowMore = false
                }
                if (item.propMap.isTitleShow === 'true') {
                  item.propMap.isTitleShow = true
                } else {
                  item.propMap.isTitleShow = false
                }
              }
            })
            if (this.appType === 13) {
              this.listDetails.push({
                componentType: 100
              })
            }
            doPreviewWxaCode(this.getEnterpriseId(), this.customPage.pageId, this.customPage.pageType, this
              .getVersionType(), this.appType).then(response => {
              if (response.isError) return
              this.shopPreviewWxaCode = response.data
            })
          })
          this.editForm(1)
        }
        this.type = 0
        this.otherType = 0
        if (!queryParams.navType || Number(queryParams.navType) === 10) {
          // 装修
          this.editForm(1)
        }
      },
      btnGroupTs(item) {
        item.btnGroup = []
        const length = item.buttonGroupList.length
        const pageNum = item.propMap.pageNum * 1 || 2
        const rowNum = item.propMap.rowNum * 1
        let arr2 = []
        let arr3 = []
        let count = 1
        for (let i = 0; i < length; i++) {
          arr3.push(item.buttonGroupList[i])
          if (arr3.length === rowNum || (i + 1 === length)) {
            arr2.push(arr3)
            arr3 = []
          }
          if ((i + 1 === rowNum * pageNum * count) || (i + 1 === length)) {
            item.btnGroup.push(arr2)
            count++
            arr2 = []
          }
        }
      },
      addForm(type, details) {
        if (type === 30) {
          const liveList = this.listDetails.filter(e => e.componentType * 1 === 30)
          if (liveList.length > 0) {
            this.$message.error('直播组件最多允许添加1个!')
            return
          }
        }
        if (type === 21) {
          const floatButtons = this.listDetails.filter(e => e.componentType * 1 === 21)
          if (floatButtons.length > 0) {
            this.$message.error('悬浮按钮组件最多允许添加1个!')
            return
          }
        }
        if (type === 41) {
          const topnavs = this.listDetails.filter(e => e.componentType * 1 === 41)
          if (topnavs.length > 0) {
            this.$message.error('标签导航最多允许添加1个!')
            return
          }
        }
        this.otherType = 0
        this.boxFormBoolean = true
        if (this.listDetails.length > 0) {
          this.sortNo = this.listDetails[this.listDetails.length - 1].sortNo + 1
        }
        this.type = type
        const fromNum = 0
        this.resetDetails()
        if (type === 11) {
          // 按钮组添加
          this.details.propMap = {
            buttonStyle: '10',
            rowNum: '4',
            pageNum: '2',
            backgroundColor: '#FFFFFF',
            fontColor: '#333333',
            verticalMargin: 0,
            horizontalMargin: 15,
            radius: 15,
            templateStyle: '10' // 按钮模版 （10：图文导航 11：文字导航）
          }
          this.details.buttonGroupList = []
          this.details.btnGroup = []
          const pageNum = this.details.propMap.pageNum * 1 || 2
          const rowNum = this.details.propMap.rowNum * 1
          let arr2 = []
          let arr3 = []
          let count = 1
          for (let i = 0; i < 8; i++) {
            this.details.buttonGroupList.push({
              buttonId: '',
              imgUrl: '',
              buttonName: '',
              buttonColor: '',
              link: ''
            })
            arr3.push({
              buttonId: '',
              imgUrl: '',
              buttonName: '',
              buttonColor: '',
              link: ''
            })
            if (arr3.length === rowNum || (i + 1 === 8)) {
              arr2.push(arr3)
              arr3 = []
            }
            if ((i + 1 === rowNum * pageNum * count) || (i + 1 === 8)) {
              this.details.btnGroup.push(arr2)
              count++
              arr2 = []
            }
          }
          if (details) {
            this.details = JSON.parse(JSON.stringify(details))
            this.details.detailsId = ''
            this.details.propList = []
            this.details.buttonGroupList.forEach(item => {
              item.buttonId = ''
              item.detailsId = ''
            })
          }
          this.$bus.$emit('resetDetailsBtns', this.details)
        } else if (type === 12) {
          // 图片模块添加
          this.details.pictureList = [{
            pictureId: '',
            imgUrl: '',
            link: ''
          }, {
            pictureId: '',
            imgUrl: '',
            link: ''
          }]
          this.details.propMap = {
            picStyle: '11',
            verticalMargin: 0,
            horizontalMargin: 0,
            radius: 0
          }
          if (details) {
            this.details = JSON.parse(JSON.stringify(details))
            this.details.detailsId = ''
            this.details.propList = []
            this.details.pictureList.forEach(item => {
              item.pictureId = ''
              item.detailsId = ''
            })
          }
          this.$bus.$emit('resetDetailsPicture', this.details)
        } else if (type === 13) {
          // 标题组添加
          this.details.propMap = {
            fontColor: '#000000',
            backgroundColor: '#FFFFFF',
            textAlign: '11',
            textSize: 10,
            verticalMargin: '16',
            horizontalMargin: '15',
            titleStyle: '10',
            showMoreColor: '#000000'
          }
          if (details) {
            this.details = JSON.parse(JSON.stringify(details))
            this.details.detailsId = ''
            this.details.propList = []
          }
          this.$bus.$emit('resetDetailsTitle', this.details)
        } else if (type === 14) {
          // 文本模块添加
          if (details) {
            this.details = JSON.parse(JSON.stringify(details))
            this.details.detailsId = ''
            this.details.propList = []
            this.details.text.textId = ''
            this.details.text.detailsId = ''
          }
          this.$bus.$emit('resetDetailsText', this.details)
        } else if (type === 15) {
          // 搜索框添加
          this.details.propMap = {
            backgroundColor: '',
            textAlign: '10',
            iconColor: '#CCCCCC',
            searchStyle: '10',
            placeholder: '请输入关键字进行搜索',
            fontColor: '#CCCCCC'
          }
          if (details) {
            this.details = JSON.parse(JSON.stringify(details))
            this.details.detailsId = ''
            this.details.propList = []
          }
          this.$bus.$emit('resetDetailsSearch', this.details)
        } else if (type === 19) {
          this.details.propMap = {
            swiperStyle: '10',
            verticalMargin: '0',
            horizontalMargin: '0',
            radius: '0'
          }
          if (details) {
            this.details = JSON.parse(JSON.stringify(details))
            this.details.detailsId = ''
            this.details.propList = []
            this.details.swiperList.forEach(item => {
              item.buttonId = ''
              item.detailsId = ''
            })
          }
          this.$bus.$emit('resetDetailsSwiper', this.details)
        } else if (type === 21) {
          // 悬浮按钮添加
          this.details.propMap = {
            showNum: '2'
          }
          const customerObj = {
            buttonId: '',
            imgUrl: 'https://veekrayimg.joinsun.vip/upload/float-btns-customer-service-3.png',
            linkType: '1002',
            linkRemark: '基础链接 - 微信客服'
          }
          const couponObj = {
            buttonId: '',
            imgUrl: 'https://veekrayimg.joinsun.vip/upload/float-btns-coupon-3.png',
            linkType: '1001',
            linkRemark: '基础链接 - 领券中心'
          }
          this.details.floatButtonList = []
          if (this.appType === 10) {
            this.details.floatButtonList.push(customerObj)
            this.details.floatButtonList.unshift(couponObj)
          }
          if (this.appType === 11) {
            this.details.floatButtonList.push(customerObj)
          }
          if (this.details.floatButtonList.length < 2) {
            const length = 2 - this.details.floatButtonList.length
            for (let i = 1; i <= length; i++) {
              this.details.floatButtonList.push({
                buttonId: '',
                imgUrl: '',
                linkType: '',
                linkRemark: ''
              })
            }
          }
          if (details) {
            this.details = JSON.parse(JSON.stringify(details))
            this.details.detailsId = ''
            this.details.propList = []
            this.details.floatButtonList.forEach(item => {
              item.buttonId = ''
              item.detailsId = ''
            })
          }
          this.$bus.$emit('resetDetailsFloatbtns', this.details)
        } else if (type === 22) {
          // 辅助分割
          this.details.propMap = {
            blankStyle: '10',
            lineColor: '#E6E7EB',
            lineHeight: 2,
            verticalMargin: 16
          }
          if (details) {
            this.details = JSON.parse(JSON.stringify(details))
            this.details.detailsId = ''
            this.details.propList = []
          }
          this.$bus.$emit('resetDetailsAuxiliary', this.details)
        } else if (type === 16) {
          // 视频模块添加
          if (details) {
            this.details = JSON.parse(JSON.stringify(details))
            this.details.detailsId = ''
            this.details.propList = []
            this.details.video.videoId = ''
            this.details.video.detailsId = ''
          }
          this.$bus.$emit('resetDetailsVideo', this.details)
        } else if (type === 17) {
          // 音频模块添加
          if (details) {
            this.details = JSON.parse(JSON.stringify(details))
            this.details.detailsId = ''
            this.details.propList = []
            this.details.audio.audioId = ''
            this.details.audio.detailsId = ''
          }
          this.$bus.$emit('resetDetailsAudio', this.details)
        } else if (type === 20) {
          // 商品模块添加
          this.details.goodsList = []
          if (this.appType !== 13) {
            // 云店、批发小程序
            this.details.propMap = {
              sellOutIconType: '10',
              goodsStyle: '11',
              goodsDetailStyle: '10',
              backgroundStyle: '10',
              buyButtonStyle: '10',
              backgroundColor: '',
              verticalMargin: 0,
              horizontalMargin: 15,
              radius: 4
            }
          } else {
            // 主播小程序
            this.details.propMap = {
              sellOutIconType: '10',
              goodsStyle: '12',
              goodsDetailStyle: '10',
              backgroundStyle: '10',
              buyButtonStyle: '10',
              backgroundColor: '',
              verticalMargin: 0,
              horizontalMargin: 15,
              radius: 5
            }
          }
          if (details) {
            this.details = JSON.parse(JSON.stringify(details))
            this.details.detailsId = ''
            this.details.propList = []
            this.details.propMap.buyShow = this.details.propMap.showBuyButton === '1'
            this.details.goodsList.forEach(item => {
              item.detailsId = ''
            })
          }
          this.$bus.$emit('resetDetailsGoods', this.details)
        } else if (type === 30) {
          // 小程序直播添加
          this.details.propMap = {
            liveTitle: '',
            showType: '10',
            showStyle: '10'
          }
          if (details) {
            this.details = JSON.parse(JSON.stringify(details))
            this.details.detailsId = ''
            this.details.propList = []
          }
          this.$bus.$emit('resetDetailsLive', this.details)
        } else if (type === 31) {
          // 秒杀模块添加
          this.details.goodsList = [{
            goodsSortNo: 0,
            imgUrl: ''
          }, {
            goodsSortNo: 1,
            imgUrl: ''
          }]
          this.details.propMap = {
            promotionTitle: '',
            promotionStyle: '10',
            firstLoadNum: 20,
            selectType: '10',
            sortType: '10',
            showScribingPrice: '0',
            showSalesNum: '0',
            isShowScribingPrice: false,
            isShowSalesNum: false,
            goodsDetailStyle: '10',
            verticalMargin: 0,
            horizontalMargin: 15,
            radius: 4,
            isTitleShow: true,
            titleShow: '1',
            isMoreShow: true,
            moreShow: '1'
          }
          if (details) {
            this.details = JSON.parse(JSON.stringify(details))
            this.details.detailsId = ''
            this.details.propList = []
            this.details.propMap.isShowScribingPrice = this.details.propMap.showScribingPrice === '1'
            this.details.propMap.isShowSalesNum = this.details.propMap.showSalesNum === '1'
            this.details.propMap.buyShow = this.details.propMap.showBuyButton === '1'
            this.details.goodsList.forEach(item => {
              item.detailsId = ''
            })
          }
          this.$bus.$emit('resetDetailsPromotion', this.details)
        } else if (type === 32) {
          // 社区团购模块添加
          this.details.goodsList = [{
            goodsSortNo: 0,
            imgUrl: ''
          }, {
            goodsSortNo: 1,
            imgUrl: ''
          }, {
            goodsSortNo: 2,
            imgUrl: ''
          }, {
            goodsSortNo: 3,
            imgUrl: ''
          }]
          this.details.componentPromotionItemList = []
          this.details.propMap = {
            promotionTitle: '社区团购',
            promotionStyle: '14',
            firstLoadNum: 4,
            selectType: '11',
            sortType: '10',
            showScribingPrice: '0',
            showSalesNum: '0',
            isShowScribingPrice: false,
            isShowSalesNum: false,
            goodsDetailStyle: '10',
            verticalMargin: 0,
            horizontalMargin: 15,
            radius: 4,
            isTitleShow: true,
            titleShow: '1',
            isMoreShow: true,
            moreShow: '1',
            linkMoreRemark: '社区团购',
            linkMoreType: '1502'
          }
          if (details) {
            this.details = JSON.parse(JSON.stringify(details))
            this.details.detailsId = ''
            this.details.propList = []
            this.details.propMap.isShowScribingPrice = this.details.propMap.showScribingPrice === '1'
            this.details.propMap.isShowSalesNum = this.details.propMap.showSalesNum === '1'
            this.details.propMap.buyShow = this.details.propMap.showBuyButton === '1'
            this.details.goodsList.forEach(item => {
              item.detailsId = ''
            })
            this.details.componentPromotionItemList.forEach(item => {
              item.detailsId = ''
            })
          }
          this.$bus.$emit('resetDetailsGroupBuy', this.details)
        } else if (type === 33) {
          const liveList = this.listDetails.filter(e => e.componentType * 1 === 33)
          if (liveList.length > 0) {
            this.$message.error('最多只能添加1个热搜推荐组件!')
            return
          }
          // 热搜推荐组添加
          this.details.propMap = {
            wordsBackground: '#ffffff',
            opacity: 0
          }
          this.details.wordsList = []
          for (let i = 0; i < 2; i++) {
            this.details.wordsList.push({
              wordsId: '',
              wordsName: '',
              wordsColor: '#ffffff',
              linkType: '',
              linkParams: ''
            })
          }
          if (details) {
            this.details = JSON.parse(JSON.stringify(details))
            this.details.detailsId = ''
            this.details.propList = []
            this.details.wordsList.forEach(item => {
              item.wordsId = ''
              item.detailsId = ''
            })
          }
          this.$bus.$emit('resetDetailsRecommendSearch', this.details)
        } else if (type === 40) {
          this.details.propMap = {
            contentTitle: '',
            isTitleShow: true,
            titleShow: '1',
            isShowMore: true,
            showMore: '1'
          }
          this.details.contentList = []
          if (details) {
            this.details = JSON.parse(JSON.stringify(details))
            this.details.detailsId = ''
            this.details.contentList.forEach(item => {
              item.contentId = ''
              item.detailsId = ''
            })
          }
          this.$bus.$emit('resetDetailsContent', this.details)
        } else if (type === 41) {
          // 新增标签导航组件
          this.details.propMap = {
            backgroundColor: '#FFFFFF',
            selectBackgroundColor: '#FFFFFF',
            fontColor: '#333333',
            selectFontColor: '#ED4014'
          }
          this.details.topNavList = []
          for (let index = 0; index < 4; index++) {
            this.details.topNavList.push({
              topnavId: '',
              navName: index === 0 ? '首页' : '',
              backgroundColor: '',
              selectBackgroundColor: '',
              fontColor: '',
              selectFontColor: '',
              linkType: index === 0 ? '1005' : '',
              linkParams: '',
              linkRemark: index === 0 ? '首页' : ''
            })
          }
          if (details) {
            this.details = JSON.parse(JSON.stringify(details))
            this.details.detailsId = ''
            this.details.navList.forEach(item => {
              item.contentId = ''
              item.detailsId = ''
            })
          }
          this.$bus.$emit('resetDetailsTopnav', this.details)
        } else if (type === 100) {
          if (this.customPage.shopHomeFlag === 1) {
            this.$message.error('店主主页组件最多允许添加1个!')
            return
          }
          // 新增店主主页组件
          this.$set(this.customPage, 'shopHomeFlag', 1)
          this.editForm(3)
        }
        if (fromNum === 0) {
          this.details.componentType = type
          const tempDetails = []
          let addNewDetails = false
          for (let i = 0; i < this.listDetails.length; i++) {
            tempDetails.push(this.listDetails[i])
            if (this.listDetails[i].show) {
              // 将新增组件放置在选中组件下方
              tempDetails.push(this.details)
              addNewDetails = true
            }
            this.listDetails[i].show = false
          }
          if (!addNewDetails) {
            // 没有选中组件时，将新增组件放置在最底部或最顶部
            if (this.customPage.carouselShow || this.customPage.topbarShow) {
              // 选中店主主页入口栏时，将新增组件放置在最顶部
              tempDetails.unshift(this.details)
            } else {
              tempDetails.push(this.details)
            }
          }
          for (let i = 0; i < tempDetails.length; i++) {
            tempDetails[i].sortNo = i
          }
          this.listDetails = tempDetails
          this.details.show = true
          this.sortNo = this.details.sortNo
        }
      },
      editForm(type) {
        this.boxFormBoolean = true
        this.type = 0
        this.otherType = type
        for (let i = 0; i < this.listDetails.length; i++) {
          this.listDetails[i].show = false
        }
        switch (type) {
          default:
          case 1:
            this.customPage.mpTitleShow = false
            this.customPage.topbarShow = false
            this.customPage.carouselShow = false
            break
          case 2:
            this.customPage.mpTitleShow = true
            this.customPage.topbarShow = false
            this.customPage.carouselShow = false
            break
          case 3:
            this.customPage.mpTitleShow = false
            this.customPage.topbarShow = true
            this.customPage.carouselShow = false
            break
          case 4:
            this.customPage.mpTitleShow = false
            this.customPage.topbarShow = false
            this.customPage.carouselShow = true
            this.$bus.$emit('resetDetailsSwiper', this.customPage)
            break
        }
      },
      scrollBottom() {
        this.$nextTick(() => {
          const container = this.$el.querySelector('.diy-scroll-box')
          container.scrollTop = container.scrollHeight
        })
      },
      remove(item) {
        this.boxFormBoolean = false
        this.listDetails.splice(item.sortNo, 1)
        const listDetailsCopy = []
        for (let i = 0; i < this.listDetails.length; i++) {
          this.listDetails[i].sortNo = i
          listDetailsCopy.push(this.listDetails[i])
        }
        this.listDetails = listDetailsCopy
        this.editForm(1)
      },
      submit(status, customPage) {
        let flag = true
        const filters = this.listDetails
        for (let a = 0; a < filters.length; a++) {
          filters[a].index = a
          filters[a].sortNo = a
          if (filters[a].componentType === 14) {
            if (filters[a].text.content === '') {
              this.$message.error('文本内容不能为空')
              this.$bus.$emit('disabledButtonEmit')
              return
            }
          }
          if (filters[a].componentType === 11) {
            if (filters[a].buttonGroupList.length === 0) {
              this.$message.error('按钮组按钮不能为空')
              this.$bus.$emit('disabledButtonEmit')
              return
            }
            for (let i = 0; i < filters[a].buttonGroupList.length; i++) {
              const button = filters[a].buttonGroupList[i]
              if (filters[a]['propMap']['templateStyle'] === '10') {
                if (!button.imgUrl || !button.buttonName || !button.linkType) {
                  this.$message.error('图文按钮需要设置图片，文字以及链接')
                  this.$bus.$emit('disabledButtonEmit')
                  return
                }
              } else {
                if (!button.buttonName || !button.linkType) {
                  this.$message.error('文字按钮需要设置文字以及链接')
                  this.$bus.$emit('disabledButtonEmit')
                  return
                }
              }
            }
            if (filters[a]['propMap']['templateStyle'] === '10') {
              filters[a].buttonGroupList = filters[a].buttonGroupList.filter(e => e.imgUrl !== '' && e.buttonName !==
                '' && e.linkType !== '')
            }
          }
          if (filters[a].componentType * 1 === 21) {
            if (filters[a].floatButtonList.length === 0) {
              this.$message.error('悬浮按钮不能为空')
              this.$bus.$emit('disabledButtonEmit')
              return
            }
            const showNum = filters[a].propMap.showNum * 1
            for (let i = 0; i < showNum; i++) {
              const button = filters[a].floatButtonList[i]
              if (!button.imgUrl || !button.linkType) {
                this.$message.error('悬浮按钮需要设置图片，链接')
                this.$bus.$emit('disabledButtonEmit')
                return
              }
            }
            const linkType = filters[a].floatButtonList[0].linkType * 1
            if (linkType === 1011 || linkType === 1012) {
              if (showNum === 2 && filters[a].floatButtonList[0].linkType * 1 === filters[a].floatButtonList[1]
                .linkType * 1) {
                this.$message.error('2个按钮不能同时设置同一种客服链接')
                this.$bus.$emit('disabledButtonEmit')
                return
              }
            }

            if (filters[a].floatButtonList.length > showNum) {
              // 悬浮按钮按显示数量存储
              filters[a].floatButtonList.splice(showNum, filters[a].floatButtonList.length - showNum)
            }
            filters[a].floatButtonList = filters[a].floatButtonList.filter(e => e.imgUrl !== '' && e.linkType !== '')
          }
          if (filters[a].componentType === 12) {
            if (filters[a].pictureList.length === 0) {
              this.$message.error('图片不能为空')
              this.$bus.$emit('disabledButtonEmit')
              return
            }
            if (filters[a].pictureList[0].imgUrl === '') {
              this.$message.error('图片组第一张图片不能为空')
              this.$bus.$emit('disabledButtonEmit')
              return
            }
            if (filters[a].propMap.picStyle === '11') {
              for (let i = 0; i < filters[a].pictureList.length; i++) {
                const picture = filters[a].pictureList[i]
                if (picture.imgUrl === '') {
                  this.$message.error('单列双图，两张图片都不能为空')
                  this.$bus.$emit('disabledButtonEmit')
                  return
                }
              }
            }
            filters[a].pictureList = filters[a].pictureList.filter(e => e.imgUrl !== '')
          }
          if (filters[a].componentType === 20) {
            if (filters[a].propMap.selectType === '10') {
              // 手动添加商品，数据校验
              if (!filters[a].goodsList || !filters[a].goodsList.length) {
                this.$message.error('请添加商品')
                this.$bus.$emit('disabledButtonEmit')
                flag = false
                return
              }
              filters[a].goodsList.forEach(e => {
                if (!e.imgUrl || e.goodsId === '') {
                  this.$message.error('商品不能为空')
                  this.$bus.$emit('disabledButtonEmit')
                  flag = false
                  return
                }
              })
            } else {
              if (!filters[a].propMap.selectMode) {
                this.$message.error('选择模式不能为空')
                this.$bus.$emit('disabledButtonEmit')
                flag = false
                return
              }
              if (!filters[a].propMap.modeId) {
                switch (filters[a].propMap.selectMode) {
                  default:
                  case '10':
                    this.$message.error('请选择商品分类')
                    break
                  case '11':
                    this.$message.error('请选择商品品牌')
                    break
                  case '12':
                    this.$message.error('请选择品牌分类')
                    break
                  case '13':
                    this.$message.error('请选择商品分组')
                    break
                  case '20':
                    this.$message.error('请选择供应商分类')
                    break
                  case '21':
                    this.$message.error('请选择供应商地区')
                    break
                }
                this.$bus.$emit('disabledButtonEmit')
                flag = false
                return
              }
            }
          }
          if (filters[a].componentType === 22) {
            const propMap = filters[a].propMap
            if (propMap.blankStyle * 1 === 10 && propMap.verticalMargin * 1 < 1) {
              this.$message.error('辅助分割-空白样式的最小边距为1')
              this.$bus.$emit('disabledButtonEmit')
              return
            }
          }
          if (filters[a].componentType === 16) {
            if (!filters[a].video.videoUrl) {
              this.$message.error('视频不能为空')
              this.$bus.$emit('disabledButtonEmit')
              return
            }
          }
          if (filters[a].componentType === 17) {
            if (!filters[a].audio.audioUrl) {
              this.$message.error('音频不能为空')
              this.$bus.$emit('disabledButtonEmit')
              return
            }
            if (filters[a].audio.title.length > 12) {
              this.$message.error('音频标题长度不能大于12个字')
              this.$bus.$emit('disabledButtonEmit')
              return
            }
          }
          if (filters[a].componentType === 20) {
            const propMap = filters[a].propMap
            propMap.showBuyButton = propMap.buyShow ? '1' : '0'
          }
          if (filters[a].componentType === 30) {
            const hasLiveList = filters[a].liveList && filters[a].liveList.length > 0
            if (filters[a].propMap.liveAddType * 1 === 11 && !hasLiveList) {
              this.$message.error('手动添加直播间必须至少选择一个直播间')
              this.$bus.$emit('disabledButtonEmit')
              return
            }
            if (hasLiveList) {
              filters[a].liveList.forEach(live => {
                live.roomId = live.roomid
              })
            }
            filters[a].propMap.titleShow = filters[a].propMap.isTitleShow ? '1' : '0'
            filters[a].propMap.moreShow = filters[a].propMap.isMoreShow ? '1' : '0'
          }
          if (filters[a].componentType === 31) {
            const propMap = filters[a].propMap
            propMap.showScribingPrice = propMap.isShowScribingPrice ? '1' : '0'
            propMap.showSalesNum = propMap.isShowSalesNum ? '1' : '0'
            propMap.showBuyButton = propMap.buyShow ? '1' : '0'
            propMap.titleShow = propMap.isTitleShow ? '1' : '0'
            propMap.moreShow = propMap.isMoreShow ? '1' : '0'
            if (!propMap.promotionTitle) {
              propMap.promotionTitle = '今日秒杀'
            }
            if (propMap.selectType * 1 === 11 && !propMap.promotionId) {
              this.$message.error('秒杀组-请先选择活动')
              return
            }
            if (propMap.selectType * 1 === 10) {
              // 如果是自动选择，promotionId设置为空
              propMap.promotionId = ''
            }
          }
          if (filters[a].componentType === 32) {
            const propMap = filters[a].propMap
            if (propMap.selectType * 1 === 11 && this.details.componentPromotionItemList) {
              if (this.details.componentPromotionItemList.length === 0 && this.details
                .isClickPromotionGroup) {
                this.$message.error('社区团购-请先选择活动')
                return
              }
            }
            if (propMap.selectType * 1 === 10) {
              // 如果是自动选择，promotionId设置为空
              propMap.promotionId = ''
            }
          }
          if (filters[a].componentType === 40) {
            const propMap = filters[a].propMap
            propMap.titleShow = propMap.isTitleShow ? '1' : '0'
            propMap.showMore = propMap.isShowMore ? '1' : '0'
            if (!propMap.contentTitle) {
              propMap.contentTitle = '最新内容'
            }
            if (!filters[a].contentList || filters[a].contentList.length === 0) {
              this.$message.error('请先添加内容')
              return
            }
            for (let i = 0; i < filters[a].contentList.length; i++) {
              filters[a].contentList[i].sortNo = i
            }
          }
          if (filters[a].componentType === 41) {
            for (let i = 0; i < filters[a].topNavList.length; i++) {
              const topNav = filters[a].topNavList[i]
              if (!topNav.navName || !topNav.linkType) {
                this.$message.error('标签导航需要设置名称以及链接')
                this.$bus.$emit('disabledButtonEmit')
                return
              }
            }
            filters[a].topNavList = filters[a].topNavList.filter(e => e.navName !== '' && e.linkType !== '')
          }
        }
        // 导航校验
        if (this.customPage.bottomNavList.length > 0) {
          var bottomNavFail = false
          var failMsg = ''
          this.customPage.bottomNavList.forEach(e => {
            if (!bottomNavFail) {
              if (!e.navName) {
                failMsg = '导航名称不能为空'
                bottomNavFail = true
              }
              if (!bottomNavFail && !e.linkType) {
                failMsg = '导航链接不能为空'
                bottomNavFail = true
              }
            }
          })
          if (bottomNavFail) {
            this.$message.error(failMsg)
            return
          }
        }
        if (flag) {
          this.listDetails = filters
          // 保存
          this.customPage.detailsList = this.listDetails
          if (customPage) {
            Object.assign(this.customPage, customPage)
          }
          this.loading = this.$loading({
            lock: true,
            text: '正在保存，请耐心等待……',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.5)'
          })
          saveCustomPage(this.customPage).then(response => {
            this.loading.close()
            if (response.isError) return
            if (status * 1 === 3) {
              this.wxaCode = this.shopPreviewWxaCode
              if (this.wxaCode) {
                this.codeVisible = true
              }
            } else if (status * 1 === 2) {
              this.$confirm('是否确认将该页面替换到您当前小程序首页？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                publishCustomPage(this.getEnterpriseId(), this.customPage.pageId, this.customPage.appType, this
                  .homeType).then(response => {
                  if (response.isError) return
                  this.$message({
                    type: 'success',
                    message: '发布成功',
                    customClass: 'messageBox-shop'
                  })
                  this.wxaCode = this.shopHomeWxaCode
                  if (this.wxaCode) {
                    this.codeVisible = true
                  }
                })
              })
              // this.$confirm('确定要重新发布当前版本至微信审核吗？', '提示', {
              //   confirmButtonText: '确定',
              //   cancelButtonText: '取消',
              //   type: 'warning'
              // }).then(() => {
              //   this.loading = this.$loading({
              //     lock: true,
              //     text: '正在发布，请耐心等待……',
              //     spinner: 'el-icon-loading',
              //     background: 'rgba(0, 0, 0, 0.5)'
              //   })
              //   publishCustomPage(this.getEnterpriseId(), this.customPage.pageId, this.customPage.appType).then(response => {
              //     if (response.isError) {
              //       this.loading.close()
              //       return
              //     }
              //     const appConf = response.data
              //     this.commit(appConf)
              //   })
              // })
            } else if (status * 1 === 1) {
              this.wxaCode = this.shopHomeWxaCode
              if (this.wxaCode) {
                this.codeVisible = true
              }
            }
          })
        }
      },
      commit(appConf) {
        checkAccessToken(appConf.appId).then(response => {
          if (response.data === 1) {
            commit(appConf.appId).then(response => {
              this.loading.close()
              if (response.isError) return
              // 跳转至版本更新页
              this.$router.push({
                path: '/card/card/version-update'
              })
            })
          } else {
            this.$confirm('授权超时！请重新授权', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              location.href = appConf.authUrl
            }).catch(() => {
              this.$message.error('小程序未授权')
            })
          }
        })
      },
      closeWxaCode() {
        // location.reload()
      },
      formCheckEls() {
        this.nullEdit = true
        this.otherType = -1
        for (let i = 0; i < this.listDetails.length; i++) {
          this.listDetails[i].show = false
        }
        this.details.show = false
        this.boxFormBoolean = true
        this.type = 100
        this.details = {}
      },
      formGroupAddressEls() {
        this.nullEdit = true
        this.otherType = -1
        for (let i = 0; i < this.listDetails.length; i++) {
          this.listDetails[i].show = false
        }
        this.details.show = false
        this.boxFormBoolean = true
        this.type = 101
        this.details = {}
      },
      // 组件块点击事件
      formEls(item) {
        this.nullEdit = false
        item.canUp = true
        item.canDown = true
        if (item.sortNo === 0) {
          item.canUp = false
        }
        if (item.sortNo >= this.listDetails.length - 1) {
          item.canDown = false
        }
        // 当前的状态
        this.otherType = 0
        this.boxFormBoolean = true
        this.type = item.componentType
        this.details = item
        if (this.navType === 10) {
          this.customPage.mpTitleShow = false
          this.customPage.topbarShow = false
          this.customPage.carouselShow = false
        }
        for (let i = 0; i < this.listDetails.length; i++) {
          this.listDetails[i].show = false
        }
        this.details.show = true
        if (this.type === 11) {
          // 按钮组模块
          this.$bus.$emit('resetDetailsBtns', this.details)
        } else if (this.type === 12) {
          // 图片模块
          this.$bus.$emit('resetDetailsPicture', this.details)
        } else if (this.type === 13) {
          // 图片模块
          this.$bus.$emit('resetDetailsTitle', this.details)
        } else if (this.type === 14) {
          // 文本模块
          this.$bus.$emit('resetDetailsText', this.details)
        } else if (this.type === 15) {
          // 搜索框模块
          this.$bus.$emit('resetDetailsSearch', this.details)
        } else if (this.type === 16) {
          // 视频模块
          this.$bus.$emit('resetDetailsVideo', this.details)
        } else if (this.type === 17) {
          // 音频模块
          this.$bus.$emit('resetDetailsAudio', this.details)
        } else if (this.type === 19) {
          // 图片轮播模块
          this.$bus.$emit('resetDetailsSwiper', this.details)
        } else if (this.type === 20) {
          // 商品模块
          this.$bus.$emit('resetDetailsGoods', this.details)
        } else if (this.type === 30) {
          // 小程序直播模块
          this.$bus.$emit('resetDetailsLive', this.details)
        } else if (this.type === 31) {
          // 秒杀组模块
          this.$bus.$emit('resetDetailsPromotion', this.details)
        } else if (this.type === 32) {
          // 社区团购模块
          this.$bus.$emit('resetDetailsGroupBuy', this.details)
        } else if (this.type === 33) {
          // 热搜推荐模块
          this.$bus.$emit('resetDetailsRecommendSearch', this.details)
        } else if (this.type === 40) {
          // 内容组模块
          this.$bus.$emit('resetDetailsContent', this.details)
        } else if (this.type === 41) {
          // 标签导航模块
          this.$bus.$emit('resetDetailsTopnav', this.details)
        }
      },
      getdata(evt) {
        // 这里evt.draggedContext后续的内容根据具体的定义变量而定
      },
      datadragEnd(evt) {
        this.boxFormBoolean = false
        evt.preventDefault()
        const filters = this.listDetails
        for (let a = 0; a < filters.length; a++) {
          filters[a].index = a
          filters[a].sortNo = a
        }
        this.listDetails = filters
      },
      upDetails() {
        if (this.nullEdit) return
        if (this.customPage.mpTitleShow || this.customPage.topbarShow || this.customPage.carouselShow) {
          return
        }
        if (this.details.sortNo === 0) {
          return
        }
        const filters = this.listDetails
        const sortNo = this.details.sortNo
        const temp = filters[sortNo - 1]
        this.details.index = sortNo - 1
        this.details.sortNo = sortNo - 1
        filters[sortNo - 1] = this.details
        temp.index = sortNo
        temp.sortNo = sortNo
        filters[sortNo] = temp
        this.listDetails = filters
        this.upDownLineEls()
      },
      downDetails() {
        if (this.nullEdit) return
        if (this.customPage.mpTitleShow || this.customPage.topbarShow || this.customPage.carouselShow) {
          return
        }
        if (this.details.sortNo >= this.listDetails.length - 1) {
          return
        }
        const filters = this.listDetails
        const sortNo = this.details.sortNo
        const temp = filters[sortNo + 1]
        this.details.index = sortNo + 1
        this.details.sortNo = sortNo + 1
        filters[sortNo + 1] = this.details
        temp.index = sortNo
        temp.sortNo = sortNo
        filters[sortNo] = temp
        this.listDetails = filters
        this.upDownLineEls()
      },
      upDownLineEls() {
        this.listDetails.forEach(item => {
          item.canUp = true
          item.canDown = true
          if (item.sortNo === 0) {
            item.canUp = false
          }
          if (item.sortNo >= this.listDetails.length - 1) {
            item.canDown = false
          }
        })
      },
      copyDetails() {
        if (this.nullEdit) return
        if (this.customPage.mpTitleShow || this.customPage.topbarShow || this.customPage.carouselShow) {
          return
        }
        // if (this.details.componentType * 1 === 19) {
        //   return
        // }
        this.addForm(this.details.componentType, this.details)
      },
      navEls(item, index) {
        this.navType = item.navType
        switch (item.navType) {
          default:
          case 10:
            if (this.pageType === 11) return
            this.$router.push({
              path: '/card/page-detail/index',
              query: {
                pageId: this.customPage.pageId,
                pageType: this.pageType,
                navType: item.navType,
                appType: this.appType
              }
            })
            break
          case 11:
            this.$router.push({
              path: '/card/page-detail/index',
              query: {
                pageId: this.customPage.pageId,
                pageType: this.pageType,
                navType: item.navType,
                appType: this.appType
              }
            })
            break
          case 12:
            this.$router.push({
              path: '/card/page-detail/index',
              query: {
                pageId: this.customPage.pageId,
                pageType: this.pageType,
                navType: item.navType,
                appType: this.appType
              }
            })
            break
          case 13:
            this.$router.push({
              path: '/card/page-detail/index',
              query: {
                pageId: this.customPage.pageId,
                pageType: this.pageType,
                navType: item.navType,
                appType: this.appType
              }
            })
            break
        }
      },
      deleteHomeStyle() {
        this.$set(this.customPage, 'shopHomeFlag', 0)
        this.editForm(1)
      },
      resetDetails() {
        this.details = {
          detailsId: '',
          pageId: '',
          sortNo: 0,
          componentType: 0,
          backColor: '',
          propMap: {},
          goodsList: [],
          componentPromotionItemList: [],
          swiperList: [{
            imgUrl: '',
            linkRemark: '',
            linkType: '',
            linkParams: ''
          }],
          pictureList: [],
          topNavList: [],
          buttonGroupList: [],
          btnGroup: [],
          wordsList: [],
          floatButtonList: [],
          video: {
            videoId: '',
            detailsId: '',
            videoStyle: '1',
            videoImg: '',
            videoName: '',
            videoUrl: ''
          },
          audio: {
            audioId: '',
            detailsId: '',
            title: '',
            subtitle: '',
            loopPlayback: '0',
            autoPlayback: '0',
            autoDuration: ''
          },
          text: {
            textId: '',
            detailsId: '',
            content: '',
            textSize: '',
            textShape: '',
            textAlign: '',
            textColor: ''
          }
        }
      },
      saveSearchPageHotWord() {
        const data = {}
        data.enterpriseId = this.getEnterpriseId()
        data.hotWordsList = this.customPage.historyWords.hotWordsList
        const normalWordsList = this.customPage.historyWords.normalWordsList
        if (normalWordsList !== null && normalWordsList !== undefined && normalWordsList.length > 0) {
          data.hotWordsList = data.hotWordsList.concat(normalWordsList)
        }
        let isError = false
        if (data.hotWordsList !== null && data.hotWordsList !== undefined && data.hotWordsList.length > 0) {
          for (let i = 0; i < data.hotWordsList.length; i++) {
            if (data.hotWordsList[i].hotWord === null || data.hotWordsList[i].hotWord === undefined ||
              data.hotWordsList[i].hotWord === '') {
              this.msgError('热词不能为空')
              isError = true
              break
            }
          }
        }
        if (!isError) {
          this.$confirm('确认保存热词信息？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            saveSearchPageHotWord(data).then(response => {
              if (response.isError) return
              this.msgSuccess('保存成功')
            })
          })
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  @sideWhite: 66px;
  @sideSubWhite: 298px;
  @sideRightWhite: 390px;
  @height: 60px;

  .words-list {
    margin: 7px 0 0 0 !important;
    padding: 0 11px !important;

    &:after {
      content: '';
      display: block;
      clear: both;
      font-size: 0;
    }

    li {
      list-style-type: none;
      float: left;
      min-width: 26px;
      min-height: 20px;
      line-height: 20px;
      position: relative;
      margin-bottom: 7px;

      span {
        display: block;
        position: relative;
        z-index: 3;
        opacity: 1;
      }

      i {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        border-radius: 50px;
        min-height: 20px;
        line-height: 20px;
        z-index: 1;
      }
    }
  }

  .limit-buy-bar {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: left;
    padding: 3px 7px;
    background: rgba(0, 0, 0, 0.5);
    font-size: 12px;
  }

  .label-snormal {
    font-weight: bold;

    span {
      font-size: 12px !important;
      font-weight: normal !important;
    }
  }

  .label-sline {
    font-weight: normal !important;
    text-decoration: line-through !important;

    span {
      font-size: 12px !important;
      font-weight: normal !important;
    }
  }

  .price-limit {
    line-height: 1.4;
    width: 33px;
    height: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-word;
  }

  .free-tag-span {
    background: #feeaeb;
    border-radius: 3px;
    padding: 2px 3px;
    margin-right: 5px;
  }

  .plant-icon {
    margin-left: 4px;

    .icon {
      display: block;
      width: 14px;
      height: 14px;
      margin-right: 4px;
      background-size: 50px 14px;
      background: url('../../../assets/images/plant-icon.png') no-repeat left top;

      &.icon-1 {
        background-position: 0 0;
      }

      &.icon-2 {
        background-position: -18px 0;
      }

      &.icon-3 {
        background-position: -36px 0;
      }
    }
  }

  .anchor-swiper {
    .anchor-swiper-bg {
      padding: 10px 10px 0px 10px;
      background-size: 356px 248px !important;
    }

    .img-anchor {
      height: 110px;
      position: relative;
      overflow: hidden;

      .join-goods {
        position: absolute;
        left: 0;
        bottom: 0;
        font-size: 12px;
        color: #fff;
        text-align: center;
        padding: 4px 0;
        width: 100%;
        background: rgba(0, 0, 0, 0.3);
      }
    }

    .anchor-content {
      background: #fff;
      height: 84px;
      box-sizing: border-box;
      padding: 5px;
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;

      .goods-title {
        line-height: 1.4;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        word-break: break-word;
      }
    }

    /deep/ .swiper-pagination {
      bottom: 2px !important;

      .swiper-pagination-bullet {
        height: 3px !important;
        border-radius: 0 !important;
      }

      .swiper-pagination-bullet {
        background: #5919cb !important;
        margin: 0 2px !important;
      }

      .swiper-pagination-bullet-active {
        background: #fff !important;
      }
    }
  }

  .anchor-input {
    background: #fff;
    border-radius: 100px;
    height: 34px;

    .search-icon {
      width: 14px;
      height: 14px;
      display: inline-block;
      background: url("@/../../../../assets/images/icon-search.png") no-repeat;
    }

    .search-txt {
      font-size: 12px;
      color: #919191;
    }
  }

  ul.show-anchor {
    &.show-type-12 {
      li {
        padding: 0 !important;

        &:last-child {
          margin-bottom: 0 !important;
        }
      }
    }
  }

  .show-anchor {
    li {
      p {
        margin: 0;
      }
    }

    li.v-align-s {
      align-items: flex-start !important;
    }

    .img-item {
      width: 123px;
      height: 123px;
    }

    .goods-title {
      line-height: 1.4;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      word-break: break-word;
    }
  }

  .main {
    background: #f5f6fa;
    min-height: 100vh;
  }

  .content-center {
    min-height: 30px;

    .content-title {
      margin: 15px 15px -5px 15px;
    }

    .content-item {
      border-bottom: 1px solid #EEEEEE;

      .flex-between-t {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
      }

      .flex-between-col {
        height: 70px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        flex: 1;
      }

      .play-layer {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }

      .invalid-layer {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 70px;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;

        .invalid-text {
          color: white;
          font-size: 13px;
          border-radius: 50%;
          border: 1px solid white;
          width: 46px;
          height: 46px;
          text-align: center;
          line-height: 46px;
        }
      }
    }

    // 2行文字展示
    .line-2 {
      line-height: 1.4;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      word-break: break-word;
    }
  }

  .topnav-diy {
    display: flex;
    align-content: center;
    flex-wrap: nowrap;

    .topnav-diy-item {
      flex: 1;
      height: 40px;
      line-height: 40px;
      text-align: center;
      position: relative;

      .topnav-active {
        position: absolute;
        width: 30%;
        height: 3px;
        bottom: 4px;
        left: 50%;
        transform: translateX(-50%);
      }
    }

    .topnav-diy-overflow {
      flex-shrink: 0;
      flex-basis: 19%;
    }
  }

  .live-style-10 {
    .live-title {
      margin: 15px 15px -5px 15px;
    }

    .live-img {
      box-shadow: 0 0 19px rgba(172, 172, 172, 0.28);
      border: #fff 1px solid;
      border-radius: 8px;
      margin: 15px;
      overflow: hidden;
    }
  }

  .live-style-11 {
    .live-title {
      margin: 15px 15px -5px 15px;
    }

    .live-img {
      border: #eeeeee 1px solid;
      border-radius: 8px;
      margin: 15px;
      overflow: hidden;
    }
  }

  .live-style-12 {
    .live-title {
      margin: 15px 10px 0px 10px;
      z-index: 20;
    }

    .live-img {
      // margin-top: -5px;
      z-index: 19;
    }
  }

  .live-title {
    .live-more {
      font-size: 15px;
      color: #666;

      i,
      u {
        font-style: normal;
      }

      u {
        width: 15px;
        height: 15px;
        background: url("@/../../../../assets/images/icon-live-more.png") no-repeat;
      }
    }
  }

  .goods-style-10 {
    box-shadow: 0 4px 9px rgba(156, 156, 156, 0.22);
  }

  .goods-style-11 {
    border: 1px solid #eeeeee;
  }

  .side-left {
    background: #2b2b2e;
    width: @sideWhite;
    height: 100%;
    position: fixed;
    left: 0;
    top: @height;
    z-index: 10;
    padding: 0;
    margin: 0;

    li {
      background: #2b2b2e;
      color: #bfcbd9;
      height: 64px;
      line-height: 64px;
      text-align: center;
      list-style-type: none;
      padding: 0;
      margin: 0;

      &.active {
        background: #fff;
        color: #409eff;
      }
    }
  }

  .side-right {
    width: @sideRightWhite;
    height: calc(100vh - 60px);
    float: right;
    margin-top: -770px;
    background: #fff;
    overflow: auto;
    overflow-x: hidden;
    box-sizing: border-box;

    &.home {
      margin-top: -810px;
    }
  }

  .shop-content {
    padding-left: @sideWhite + @sideSubWhite;
    padding-right: @sideRightWhite;
    margin-left: -104px;
    box-sizing: border-box;

    &.template {
      padding-left: @sideWhite;

      /deep/ .el-row {
        padding: 0 4%;
      }

      .tem-1,
      .tem-2,
      .tem-3 {
        width: 80%;
        max-width: 350px;
      }
    }

    .main-box {
      min-height: 600px !important;

      &.home {
        min-height: 640px !important;
      }
    }

    .diy-bg-main {
      position: relative;
      min-height: 670px;
      // padding-top: 1px;
      padding-left: calc(50% - 188px);
      box-sizing: border-box;

      &.template {
        padding-left: 0;
      }

      &.home {
        min-height: 710px;
      }
    }

    .diy-bg-box {
      position: absolute;
      left: calc(50% - 188px);
      top: 0;
      z-index: 5;
    }

    .action-btns {
      position: absolute;
      left: calc(50% - 188px + 375px + 19px + 104px);
      top: 264px;
      z-index: 100;
      margin: 0;
      padding: 0;
      background: #fff;
      border-radius: 4px;
      box-shadow: 0 0 5px rgba(133, 133, 133, 0.2);

      li {
        list-style-type: none;
        width: 42px;
        height: 54px;
        cursor: pointer;

        &.position-btn {
          height: 44px;
        }

        span {
          width: 20px;
          height: 20px;
          background-size: 100% 100%;
        }

        &.up-btn {
          span {
            background: url('@/../../../../assets/images/icons-up-1.png') no-repeat;
          }

          &.active span {
            background: url('@/../../../../assets/images/icons-up-11.png') no-repeat;
          }
        }

        &.down-btn {
          span {
            background: url('@/../../../../assets/images/icons-down-1.png') no-repeat;
          }

          &.active span {
            background: url('@/../../../../assets/images/icons-down-11.png') no-repeat;
          }
        }

        &.copy-btn {
          span {
            background: url('@/../../../../assets/images/icons-copy-1.png') no-repeat;
          }

          &.active span {
            background: url('@/../../../../assets/images/icons-copy-11.png') no-repeat;
          }
        }

        &.setting-btn {
          span {
            background: url('@/../../../../assets/images/icons-set-1.png') no-repeat;
          }

          &.active span {
            background: url('@/../../../../assets/images/icons-set-11.png') no-repeat;
          }
        }
      }
    }

    .diy-box {
      width: 100%;

      .diy-phone {
        position: relative;
        z-index: 10;

        &:before {
          content: '';
          display: block;
          position: absolute;
          left: 0px;
          top: 0px;
          width: 104px;
          height: 120%;
          z-index: 11;
          background: #f5f6fa;
          // background: #ff0000;
        }
      }

      .content-box {
        border-left: #b8b8b8 1px solid;
        border-right: #b8b8b8 1px solid;
        background-size: 100%;
        background-repeat: no-repeat;
      }

      .diy-scroll-box {
        width: 479px;
        border-bottom: #b8b8b8 1px solid;
        padding-left: 104px;
        overflow: auto;
        overflow-x: hidden;
        height: 600px;

        &.scroll-pageType-10.scroll-appType-11 {
          height: 640px;
        }

        &.scroll-pageType-10.scroll-appType-13 {
          height: 640px;
        }

        &::-webkit-scrollbar {
          width: 4px;
        }

        &::-webkit-scrollbar-thumb {
          border-radius: 10px;
          -webkit-box-shadow: inset 0 0 5px #cccccc;
          background: #cccccc;
        }

        &::-webkit-scrollbar-track {
          -webkit-box-shadow: inset 0 0 5px #cccccc;
          border-radius: 0;
          background: #cccccc;
        }
      }
    }

    .diy-editor {
      position: absolute;
      left: 330px;
      top: 204px;
      width: 660px;
      height: auto;
      background: #fdfdfd;
      padding: 15px 10px;
      margin-left: 18px;
      border: 1px solid #ddd;
      border-radius: 5px;
      margin-top: 0px;
      display: block;
      min-height: 80px;

      &.text-editor {
        width: 610px;
      }
    }

    .diy-editor .editor-arrow {
      height: 0;
      position: relative;
    }

    .diy-editor .editor-arrow::after,
    .diy-editor .editor-arrow::before {
      position: absolute;
      font-family: simsun;
      content: "◆";
      top: 8px;
      left: -21px;
      display: block;
      width: 9px;
      height: 18px;
      font-size: 24px;
      color: rgb(253, 253, 253);
      z-index: 111;
    }

    .diy-editor .editor-arrow:after {
      left: -22px !important;
      color: #ddd !important;
      z-index: 11 !important;
    }

    .diy-editor .editor-arrow::after,
    .diy-editor .editor-arrow::before {
      position: absolute;
      font-family: simsun;
      content: "◆";
      top: 8px;
      left: -21px;
      display: block;
      width: 9px;
      height: 18px;
      font-size: 24px;
      color: rgb(253, 253, 253);
      z-index: 111;
    }

    .panel-height {
      min-height: 130px;
    }

    .action-panel {
      background: #fff;
      border: 1px solid #ddd;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      position: fixed;
      left: 578px;
      bottom: 100px;
      width: 840px;
      z-index: 1002;
    }

    @media screen and (max-width: 1045px) {
      .action-panel {
        left: 398px;
      }
    }

    .diy-phone {
      float: left;
      width: 479px;
      // border: 1px solid #b8b8b8;
      border-radius: 0px;
      background: #f5f6fa;
      padding: 0px;
      overflow: hidden;

      &.none-border {
        border: none;
        background: none;
        // margin: 0px 0 0 1px;
        border-radius: 0;
        width: 479px;
      }
    }

    .diy-phone .phone-title {
      height: 65px;
    }

    .home-carousel-box {
      position: relative;

      .carousel-none-point {
        width: 5px;
        height: 5px;
        border-radius: 50px;
        background-color: #ffffff;
        position: absolute;
        left: 50%;
        bottom: 12px;
        margin-left: -3px;
        z-index: 100;
      }
    }

    /deep/ .diy-phone .home-carousel {
      // background: #d6d6d6;
      img {
        width: 100%;
        height: 100%;
      }

      .el-carousel__arrow {
        display: none;
      }

      .el-carousel__indicator {
        &.is-active {
          .el-carousel__button {
            background-color: #ffffff;
          }
        }

        .el-carousel__button {
          width: 5px;
          height: 5px;
          border-radius: 50px;
          background-color: #989898;
          opacity: 1;
        }
      }
    }

    .diy-phone .picture-carousel-default {
      background: #81d5f9;
      min-height: 160px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
    }

    .diy-phone .phone-top-bar {
      width: 375px;
      margin-left: 104px;
      height: 40px;
      background: #fff;
      color: #333;
      cursor: default;
      // overflow: hidden;
      position: relative;

      .search-shop {
        background: rgba(0, 0, 0, 0.2);
        border-radius: 100px;
      }
    }

    .back-icon {
      position: absolute;
      left: 5px;
      top: 0;
      z-index: 5;

      /deep/ .el-icon-arrow-left {
        font-weight: bold;
      }
    }

    .diy-phone .phone-top-title {
      width: 375px;
      height: 65px;
      margin-left: 104px;
      background: url('@/../../../../assets/images/wx-top-5.png') 0 0 no-repeat;
      background-size: 100% auto;
      padding: 0 0px;
      font-size: 15px;
      color: #333333;
      text-align: center;
      line-height: 78px;
      cursor: default;
      overflow: hidden;
      display: block;
      white-space: nowrap;
      text-overflow: ellipsis;
      position: relative;

      &.top-title-anchor {
        background: url('@/../../../../assets/images/wx-top-5.png') 0 0 no-repeat;
        background-size: 100% auto;
      }

      &.title-type-w {
        background: url('@/../../../../assets/images/wx-top-3.png') 0 0 no-repeat;
        background-size: 100% auto;
      }

      &.top-title-dark {
        color: #333333;
      }

      &.top-title-white {
        color: #fff;
        background: url('@/../../../../assets/images/wx-top-4.png') 0 0 no-repeat;
        background-size: 100% auto;
      }

      &.text-align-l {
        text-align: left !important;
      }
    }

    .phone-t-info {
      h3 {
        margin: 0;
        height: 51px;
        line-height: 1.4;
        font-size: 18px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        word-break: break-word;
      }

      p {
        margin: 0;
        font-size: 12px;
      }
    }

    .diy-phone .phone-main {
      min-height: 280px;
      // background: #fff;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }

    .drag-box {
      position: relative;

      // 悬浮按钮样式
      &.floatbtn-drag {
        position: absolute;
        right: 14px;
        bottom: 45px;
        z-index: 1000;

        .diy-content {
          background: none;

          ul {
            li {
              display: block;

              &.list-b-2 {
                &:first-child {
                  margin-bottom: 10px;
                }
              }

              img {
                border-radius: 100px;
              }
            }
          }
        }
      }
    }

    .drag {
      position: relative;
      min-height: 20px;
      height: auto;
      line-height: 1.3;
      display: block;
      overflow: hidden;

      &:after {
        content: '';
        display: block;
        clear: both;
        font-size: 0;
      }
    }

    .none-drag.selected:before,
    .none-drag:hover:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border: 1px solid #409eff;
      cursor: move;
      z-index: 10;
    }

    .drag.selected:before,
    .drag:hover:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border: 1px solid #409eff;
      cursor: move;
      z-index: 10;
    }

    .drag-btns-box {
      /deep/ .el-carousel__indicators {
        display: none;
      }
    }

    .diy-content {
      min-height: 200px;
      display: block;
      margin: 0;
      padding: 0;
      height: auto;
      overflow: hidden;
      line-height: 1.3;
      // background: #fff;
      text-align: center;

      &.diy-p-content {
        min-height: 20px !important;
      }

      &.diy-t-bar {
        min-height: unset;
      }

      &.diy-t-content {
        min-height: 80px !important;
      }

      &.diy-btns-content {
        // padding: 20px 0 0!important;
        min-height: auto !important;

        &:nth-child(2) {
          padding: 17px 0 0 !important;
        }

        &.diy-txts-content {
          &:nth-child(2) {
            padding: 0 !important;
          }
        }

        li {
          box-shadow: 0 0 0;
          margin-bottom: 0;

          .btns-radius-10 {
            border-radius: 100px;
          }

          .btns-radius-11 {
            border-radius: 6px;
          }

          .btns-radius-12 {
            border-radius: 0px;
          }
        }
      }

      &.text-valign-l {
        text-align: left !important;
        padding: 0 10px !important;

        .text-valign-c {
          text-align: center !important;
        }
      }

      &.picture-default {
        background: #81d5f9;
        min-height: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      &.audio-box {
        min-height: auto;
        padding: 0 15px;

        .audio-bar {
          text-align: left !important;
          background: #fcfcfc;
          border: #e0e0e0 1px solid;
          border-radius: 5px;
          font-size: 12px;
          color: #888888;
          margin: 20px 0px;

          img {
            margin-right: 15px;
          }

          h5 {
            margin: 10px 0 5px 0;
            font-size: 14px;
            color: #333333;
            height: 20px;
            line-height: 1.3;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            word-break: break-word;
          }

          p {
            margin: 0;
            font-size: 12px;
            color: #999999;
          }
        }
      }
    }

    .diy-goods {
      text-align: left;
      margin-bottom: 10px !important;
      float: left;

      &.width-per-50 {
        width: 48%;
        margin-left: 1% !important;
        margin-right: 1% !important;
        background: #fff;
      }

      &.width-per-100 {
        background: #fff;
      }

      p {
        font-size: 14px;
        margin: 0 0 7px 0;
        padding: 0 10px;
        box-sizing: border-box;
        height: 30px;
        line-height: 30px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        word-break: break-word;
      }

      .price-bar {
        font-size: 14px;
        color: #ff3131;
        padding: 0 10px 10px 10px;
        height: 32px;

        label {
          border: #ff3131 1px solid;
          border-radius: 3px;
          padding: 0px 12px;
          height: 30px;
          line-height: 30px;
        }
      }
    }

    .btn-edit-del {
      width: 30px;
      height: 30px;
      overflow: hidden;
      position: absolute;
      right: 0px;
      top: 0px;
      display: block;
      z-index: 90;
      font-size: 14px;
      text-align: right;
      display: none;

      &.selected {
        display: block;
      }
    }

    .btn-edit-del {
      /deep/ .btn-del {
        width: 16px;
        height: 16px;
        display: inline-block;
        text-indent: -100em;
        text-align: left;
        font-size: 10px;
        color: #333;
        cursor: pointer;
        position: relative;
        z-index: 11;
        background: url('@/../../../../assets/images/icons-close-1.png') no-repeat;
        background-size: 16px 16px;
      }
    }

    .goods-default {
      background: #fe8096;
      min-height: 145px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    // 商品组样式
    .drag-box {
      ul {
        padding: 0;
        margin: 0;

        li {
          list-style-type: none;
        }
      }

      &.group-buy-bar {
        .title-bar {
          z-index: 2;
          margin-top: 10px;
          height: 51px;
          overflow: hidden;

          &:after {
            content: '';
            display: block;
            clear: both;
            font-size: 0;
          }

          h2 {
            margin: 0;
            padding: 10px 10px;
            float: left;
          }

          h2:first-child {
            box-shadow: 0 2px 7px rgba(156, 156, 156, 0.22);
            border-radius: 4px 4px 0 0;
          }
        }

        .group-content-bar {
          box-shadow: 0 2px 7px rgba(156, 156, 156, 0.22);
          padding: 8px 8px 2px 8px;
          margin-bottom: 10px;
          position: relative;
          z-index: 3;
        }

        ul.show-type-12 li.goods-style-10 {
          padding: 0;

          .buy-cart-btn {
            width: 82px;
          }
        }

        ul.show-type-12 li.goods-style-10,
        ul.show-type-11 li.goods-style-10,
        ul.show-type-10 li.goods-style-10 {
          box-shadow: 0 0 0;
        }

        &.goods-list ul.show-type-14 {
          height: 177px;
        }

        &.goods-list ul.show-type-14 li {
          width: 96px;
          margin-right: 6px;
          overflow: visible;
        }

        &.goods-list ul.show-type-14 li .gooods-pic {
          height: 96px !important;
          border-radius: 10px 10px 0 0 !important;
        }

        &.goods-list ul.show-type-14 li .gooods-pic img {
          margin-top: 0 !important;
          width: 96px !important;
          height: 96px !important;
        }

        &.goods-list ul.show-type-14 li .detail-box {
          padding: 6px 0 0 0;
        }

        &.goods-list ul.show-type-14 li.goods-style-10 {
          -webkit-box-shadow: 0 0 0;
          box-shadow: 0 0 0;
        }

        &.goods-list ul.show-type-14 li .desc {
          margin-bottom: 0px !important;
        }

        &.goods-list ul.show-type-14 li .price {
          margin-top: 2px;
          margin-bottom: 3px;
        }

        &.goods-list ul.show-type-11 li .default-pic-bar .gooods-pic {
          height: 160px;
        }

        &.goods-list ul.show-type-11 li .detail-box {
          padding: 6px 8px 14px 8px;
        }

        &.goods-list ul.show-type-11 li .desc {
          height: auto;
          margin-bottom: 0 !important;
          font-weight: bold;
        }

        &.goods-list ul.show-type-11 li .price {
          margin-top: 5px;
          margin-bottom: 3px;
        }

        &.goods-list ul.show-type-11 li:nth-child(odd) {
          margin-right: 10px;
        }

        &.goods-list ul.show-type-11 li {
          width: calc((100% - 10px) / 2);
        }

        &.goods-list ul.show-type-10 li .desc {
          height: auto;
          margin: 0;
          font-weight: bold;
        }

        &.goods-list ul.show-type-10 li .detail-box {
          padding: 6px 10px 12px 10px;
        }

        .price-line {
          box-sizing: border-box;
          height: 20px;
          line-height: 20px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          word-break: break-word;
        }

        .buy-cart-btn {
          color: #fff;
          border-radius: 50px;
          text-align: center;
        }

        .group-buy-bg {
          background-size: 100% auto !important;
          background-repeat: no-repeat;
        }

        .show-type-14 {
          .gooods-pic {
            img {
              width: 97px;
              height: 97px;
              border-top-left-radius: 4px;
              border-top-right-radius: 4px;
            }
          }
        }
      }

      &.goods-list {
        ul {
          padding: 0 0px;
          margin: 0;

          &:after {
            content: '';
            display: block;
            clear: both;
            font-size: 0;
          }

          .show-more {
            width: 100%;
            text-align: center;
            // border: 1px solid #e2e2e2;
            border-radius: 4px;
            height: 32px;
            line-height: 32px;
            margin-bottom: 15px;
            float: left;
          }

          &.show-type-10 {
            li {
              .default-pic-bar {
                .gooods-pic {
                  text-align: center;
                  background: #fe8096;
                  height: 190px;

                  img {
                    margin-top: 50px;
                    width: 90px;
                    height: 90px;
                    display: inline-block;
                  }
                }
              }

              .detail-box {
                padding: 12px 12px 8px 12px;
              }

              .gooods-pic {
                img {
                  width: 100%;
                  height: 190px;
                  border-top-left-radius: 4px;
                  border-top-right-radius: 4px;
                }

                &.pos-rel {
                  &.del-show {
                    .del-layer-bg {
                      border-top-left-radius: 4px;
                      border-top-right-radius: 4px;
                    }

                    .del-layer {
                      &.stock-none {
                        label {
                          margin-top: 12%;
                        }
                      }

                      label {
                        width: 100px;
                        height: 100px;
                        line-height: 100px;
                        font-size: 24px;
                        margin-top: 8%;
                      }

                      p {
                        font-size: 15px;
                        margin-top: 3%;
                      }
                    }
                  }
                }
              }
            }
          }

          &.show-type-11 {
            li {
              width: calc((100% - 15px) / 2);
              float: left;

              .default-pic-bar {
                .gooods-pic {
                  text-align: center;
                  background: #fe8096;
                  height: 162px;

                  img {
                    margin-top: 35px;
                    width: 90px;
                    height: 90px;
                    display: inline-block;
                  }
                }
              }

              &:nth-child(odd) {
                margin-right: 15px;
              }

              .detail-box {
                padding: 8px 10px 5px 10px;
              }

              .desc {
                margin-bottom: 8px !important;
              }

              .gooods-pic {
                img {
                  width: 100%;
                  height: 162px;
                  border-top-left-radius: 4px;
                  border-top-right-radius: 4px;
                }

                &.pos-rel {
                  &.del-show {
                    .del-layer-bg {
                      border-top-left-radius: 4px;
                      border-top-right-radius: 4px;
                    }

                    .del-layer {
                      &.stock-none {
                        label {
                          margin-top: 26%;
                        }
                      }

                      label {
                        width: 70px;
                        height: 70px;
                        line-height: 70px;
                        font-size: 16px;
                        margin-top: 18%;
                      }

                      p {
                        font-size: 12px;
                        margin-top: 6%;
                      }
                    }
                  }
                }
              }

              .buy-now-type {
                display: none;
              }

              .height-s-item {
                height: 19px;
                margin-bottom: -1px;
              }

              .price {
                .label-s {
                  display: none;
                }
              }

              button.remove-type {
                font-size: 10px;
                padding: 4px 6px;
                margin-right: -4px;
              }

              .info-bar {
                .remove-type {
                  display: none !important;
                }
              }

              .line-item.remove-type {
                display: inline-block !important;
              }

              .last-item.remove-type {
                display: none !important;
              }
            }
          }

          &.show-type-12 {
            li {
              display: -webkit-box;
              display: -webkit-flex;
              display: flex;
              flex-flow: row;
              align-items: center;
              padding: 10px 10px;

              .default-pic-bar {
                .gooods-pic {
                  text-align: center;
                  background: #fe8096;
                  width: 100px;
                  height: 100px;

                  img {
                    margin-top: 5px;
                    width: 90px !important;
                    height: 90px !important;
                    display: inline-block;
                  }
                }
              }

              .pic-box {
                margin-right: 6px;

                .gooods-pic {
                  img {
                    width: 100px;
                    height: 100px;
                  }

                  &.pos-rel {
                    &.del-show {
                      .del-layer {
                        &.stock-none {
                          label {
                            margin-top: 22%;
                          }
                        }

                        label {
                          width: 50px;
                          height: 50px;
                          line-height: 50px;
                          margin-top: 14%;
                          font-size: 13px;
                        }

                        p {
                          font-size: 10px;
                          margin-top: 5%;
                        }
                      }
                    }
                  }
                }
              }

              .detail-box {
                padding: 0px 2px 0px 7px;
                -webkit-box-flex: 1;
                -webkit-flex: 1;
                flex: 1;
              }

              .tag {
                span {
                  padding: 1px 5px !important;
                }
              }

              .price {
                .label-s {
                  display: none;
                }
              }

              .stock {
                display: none;
              }

              .info-bar {
                &.true {
                  .buy-now-type {
                    display: none !important;
                  }
                }

                .remove-type.line-item {
                  display: none !important;
                }

                .remove-type {
                  display: block !important;
                }
              }

              .last-item {
                display: none !important;
              }
            }
          }

          &.show-type-13 {
            li {
              display: -webkit-box;
              display: -webkit-flex;
              display: flex;
              flex-flow: row;
              align-items: center;
              padding: 10px 10px;

              .default-pic-bar {
                .gooods-pic {
                  text-align: center;
                  background: #fe8096;
                  width: 122px;
                  height: 122px;

                  img {
                    margin-top: 16px;
                    width: 90px !important;
                    height: 90px !important;
                    display: inline-block;
                  }
                }
              }

              &:nth-child(even) {
                .pic-box {
                  &.even {
                    display: none;
                  }

                  &.odd {
                    display: block;
                    margin-right: 0;
                    margin-left: 14px;
                  }
                }
              }

              &:nth-child(odd) {
                .pic-box {
                  &.even {
                    display: block;
                  }

                  &.odd {
                    display: none;
                  }
                }
              }

              .desc {
                margin-bottom: 6px !important;
              }

              .pic-box {
                margin-right: 14px;

                .gooods-pic {
                  img {
                    width: 122px;
                    height: 122px;
                  }

                  &.pos-rel {
                    &.del-show {
                      .del-layer {
                        &.stock-none {
                          label {
                            margin-top: 26%;
                          }
                        }

                        label {
                          width: 50px;
                          height: 50px;
                          line-height: 50px;
                          margin-top: 20%;
                          font-size: 13px;
                        }

                        p {
                          font-size: 10px;
                          margin-top: 5%;
                        }
                      }
                    }
                  }
                }
              }

              .detail-box {
                -webkit-box-flex: 1;
                -webkit-flex: 1;
                flex: 1;
                padding: 0px !important;
              }

              .desc {
                margin-bottom: 13px;
              }

              .tag {
                margin-top: -1px;
                margin-bottom: -2px;

                span {
                  padding: 1px 5px !important;
                }
              }

              .price {
                .flex-item {
                  .label-f {
                    display: flex;
                    flex-flow: row;
                    align-items: center;
                    margin-left: 0;
                  }

                  .tag-xs-t {
                    color: #292929;
                    display: inline-block;
                    vertical-align: bottom;
                    margin-bottom: -2px;
                  }

                  .label-s {
                    display: -webkit-box;
                    display: -webkit-flex;
                    display: flex;
                    margin-top: -6px;
                    margin-left: -2px;
                  }
                }
              }

              .stock {
                display: none;
              }

              .info-bar {
                .remove-type {
                  display: none !important;
                }

                .buy-now-type {
                  display: none !important;
                }
              }

              .last-item {
                display: inline-block !important;
                margin-top: 5px;
              }
            }
          }

          &.show-type-14 {
            height: 253px;
            overflow: hidden;
            display: flex;
            flex-wrap: nowrap;

            .show-more {
              width: 32px;
              line-height: 1.2;
              text-align: center;
              // border: 1px solid #e2e2e2;
              border-radius: 4px;
              height: 241px;
              word-wrap: break-word;
              /*英文的时候需要加上这句，自动换行*/
              text-align: center;
              display: flex;
              -webkit-display: flex;
              flex-direction: column;
              justify-content: center;
              letter-spacing: -2px;
            }

            li {
              width: 42%;
              flex-shrink: 0;
              margin-right: 4.5%;

              .default-pic-bar {
                .gooods-pic {
                  text-align: center;
                  background: #fe8096;
                  height: 142.38px;

                  img {
                    margin-top: 35px;
                    width: 90px;
                    height: 90px;
                    display: inline-block;
                  }
                }
              }

              .detail-box {
                padding: 8px 10px 5px 10px;
              }

              .desc {
                font-size: 13px;
                height: unset;
                margin-bottom: 24px !important;
                line-height: 1.3;
                overflow: hidden;
                color: #595959;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
                word-break: break-word;
              }

              .gooods-pic {
                img {
                  width: 100%;
                  height: 142.38px;
                  border-top-left-radius: 4px;
                  border-top-right-radius: 4px;
                }

                &.pos-rel {
                  &.del-show {
                    .del-layer-bg {
                      border-top-left-radius: 4px;
                      border-top-right-radius: 4px;
                    }

                    .del-layer {
                      &.stock-none {
                        label {
                          margin-top: 26%;
                        }
                      }

                      label {
                        width: 70px;
                        height: 70px;
                        line-height: 70px;
                        font-size: 16px;
                        margin-top: 18%;
                      }

                      p {
                        font-size: 12px;
                        margin-top: 6%;
                      }
                    }
                  }
                }
              }

              .buy-now-type {
                display: none;
              }

              .height-s-item {
                height: 19px;
                margin-bottom: -1px;
              }

              .price {
                margin-top: 9px;

                .label-s {
                  display: none;
                }

                .label-f {
                  line-height: 1;
                  font-weight: bold;

                  span:last-child {
                    font-size: 18px;

                    span {
                      font-size: 13px;
                    }
                  }
                }
              }

              button.remove-type {
                font-size: 10px;
                padding: 4px 6px;
                margin-right: -4px;
              }

              .info-bar {
                .remove-type {
                  display: none !important;
                }
              }

              .line-item.remove-type {
                display: inline-block !important;
              }

              .last-item.remove-type {
                display: none !important;
              }
            }
          }

          .pos-rel {
            position: relative;
          }

          li {
            list-style-type: none;
            border-radius: 4px;
            // box-shadow: 0 4px 9px rgba(133, 133, 133, 0.2);
            overflow: hidden;
            margin-bottom: 13px;
            background-color: #ffffff;

            .buy-sty {
              width: 22px;
              height: 23px;
              background-size: 100% 100% !important;

              &.buy-sty-10 {
                background: url(../../../assets/images/buy-sty-2.png) no-repeat;
              }

              &.buy-sty-11 {
                background: url(../../../assets/images/buy-sty-1.png) no-repeat;
              }
            }

            .detail-box {
              padding: 12px;
            }

            .buy-now-type {
              background: #fed806 !important;
              border: #fed806 1px solid !important;
              padding: 4px 9px;
              line-height: normal;
              color: #333 !important;

              &:after {
                display: none;
              }
            }

            .remove-type {
              background: #292929 !important;
              border: #292929 1px solid !important;
              padding: 4px 9px;
              line-height: normal;
              color: #fff !important;

              &:after {
                display: none;
              }
            }

            .pic-box {
              &.odd {
                display: none;
              }
            }

            .gooods-pic {
              &.pos-rel {
                &.del-show {
                  .del-layer-bg {
                    display: block;
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    background: rgba(0, 0, 0, 0.7);
                    z-index: 10;
                  }

                  .del-layer {
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    z-index: 11;
                    text-align: center;
                    color: #fff;
                    display: block;

                    &.stock-none {
                      label {
                        margin-top: 18%;
                      }
                    }

                    label {
                      width: 50px;
                      height: 50px;
                      line-height: 50px;
                      margin-top: 15%;
                      font-size: 13px;
                      background: rgba(0, 0, 0, 0.7);
                      border: rgba(255, 255, 255, 0.7) 1px solid;
                      border-radius: 100px;
                      display: inline-block;
                    }

                    p {
                      display: block;
                      font-size: 10px;
                      margin-top: 5%;
                    }
                  }
                }
              }

              img {
                display: block;
              }
            }

            .desc {
              height: 37px;
              line-height: 1.3;
              overflow: hidden;
              color: #595959;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              word-break: break-word;
            }

            .line-item {
              display: none;
            }

            .last-item {
              display: none;
            }

            .info-bar {
              >button {
                margin-bottom: 3px;
              }

              .tag {
                line-height: 1.3;

                .label-f {
                  background: #fed807;
                  color: #333;
                  padding: 2px 5px;
                }

                .label-s {
                  background: #272727;
                  color: #fff;
                  padding: 2px 5px;
                  min-width: 60px;
                  box-sizing: border-box;

                  span {
                    color: #ffc81b;
                    font-style: normal;

                    &.income-label {
                      padding: 0 !important;
                    }
                  }
                }
              }

              .price {
                .tag-xs-t {
                  display: none;
                }

                .label-f {
                  color: #ff0000;

                  span:last-child {
                    font-weight: bold;

                    span {
                      font-size: 13px;
                    }
                  }
                }

                .label-s {
                  color: #292929;
                  text-decoration: line-through;
                }
              }

              .stock {
                color: #818181;
              }

              label {
                font-weight: normal;
              }
            }
          }
        }
      }
    }

    .diy-kill-content {
      text-align: left !important;
      background: none !important;

      // .title-bar{
      //   h2{
      //     height: 7px;
      //     background-color: yellow;
      //     padding: 0 3px;
      //     // background: url(../../../assets/images/title-bg.png) bottom repeat-x;
      //     .small-title{
      //       max-width: 76px;
      //       font-size: 18px;
      //       height: 18px;
      //       overflow: hidden;
      //       margin-top: -14px;
      //     }
      //   }
      // }
      .timer {
        .timer-t {
          color: #666;
        }

        span {
          background: #fed806;
          color: #333;
          font-size: 13px;
          border-radius: 4px;
          padding: 2px;
        }

        i {
          font-style: normal;
          padding: 2px 3px;
        }
      }

      .more-seck {
        font-size: 12px;
        color: #999;

        .iconfont {
          font-size: 13px;
        }
      }
    }
  }

  .v-align {
    align-content: flex-start;
    flex-flow: row wrap;
  }

  .abs-right {
    transform: translateY(-50%);
    top: 50%;
  }

  .swiper-wrapper {
    height: 160px;

    .swiper-slide {
      img {
        width: 100%;
      }
    }
  }

  .one-simple {
    justify-content: left;

    .flex-item {
      flex: unset;
      width: calc(100% / 3);
      flex-grow: 0;
    }
  }

  .promotionStatusStyle {
    text-align: center;
  }
</style>
